VueJS - 如何查看 localStorage 中的值？

Posted 2023-02-22

【中文标题】VueJS - 如何查看 localStorage 中的值？

【英文标题】：VueJS - how to watch a value in localStorage?

【发布时间】：2018-02-02 13:06:25

【问题描述】：

我有一个nav 组件，仅当localStorage 中存储有令牌时才需要显示该组件。当从localStorage 中删除该令牌时，nav 组件需要注意该更改并隐藏自身。

解决这个问题的最佳方法是什么？

【问题讨论】：

您是否可以控制将令牌设置为 localStorage？

这能回答你的问题吗？ Is there any way to 'watch' for localstorage in Vuejs?

【参考方案1】：

本地存储不是反应式的，因此您需要将令牌存储在某个地方。我假设您的令牌正在由应用程序设置和删除。如果是这样，最好的处理方法是使用像 Vuex (see Vue State Management) 这样的状态。

选项 1

如果您使用本地存储来在多个浏览器会话之间保留令牌，最好的选择是在 Vuex 中设置令牌，然后使用 Vuex persisted state 将 Vuex 同步到本地或会话存储。当您需要重新建立状态时，插件会再次检索它。

选项 2

如果您需要将其直接设置在本地存储中，则应在更改状态时将其包含在更改中以设置/取消设置 localStorage。这将使您的 localStorage 和 State 保持同步。

例如使用 Vuex，如果您在响应中接收到令牌，则可以调用 Mutation 将其设置为 Vuex 状态并将其设置为 localStorage：

SET_TOKEN(state, payload)
    state.token = payload.token 
    localStorage.setItem('token', payload.token)

然后您可以轻松查看 Vuex 状态。根据您的 Vuex 的设置方式，它可能类似于：this.$store.state.token

【参考方案2】：

隐藏导航栏不应与设置 localStorage 相关。我希望是这样的：

function hideNav() 
  // Inform the application that the nav should hide
  dispatchHideNavAction() 

  // Change localStorage
  deleteTokenFromLocalStorage()

如果您的问题是在从另一个窗口删除令牌时隐藏导航，那么您可以使用StorageEvent：

window.addEventListener('storage', (e) => 
  if (e.key === 'mytoken' && e.newValue === null) 
    hideNav()
  
);

注意：这在同一个窗口中不起作用，但仅当令牌从另一个选项卡中删除时才起作用。

【参考方案3】：

假设您自己设置令牌，将令牌存储在全局状态并使用vue-persistent-state 将其持久化。该插件适用于不需要使用 vuex 进行状态管理的简单应用。

例如

import persistentStorage from 'vue-persistent-storage';

const initialState = 
  token: 0  // overwritten if found in localStorage
;
Vue.use(persistentStorage, initialState);

new Vue(
  data: 
    sections: ['Home', 'Edit']
    // we get `token` from persistentStorage
  ,
  template: `<nav>
      <a 
        v-for="(section, i) in sections" 
        class=" active: token === i "
      >
        section
      </a>
    </nav>`,
  methods: 
    changeToken: function () 
      // you may change token from other Vue instances too
      this.token = this.token++
      // wrap
      this.token = this.token % this.sections.length
    
  
)

token 可用作所有组件和 Vue 实例中的数据。对 this.token 的任何更改都将存储在 localStorage 中，您可以像在普通 Vue 应用中一样使用 this.token。

插件基本上是watcher和localStorage.set。您可以阅读代码here。它

添加 mixin 以使 initialState 在所有 Vue 实例中可用，并且 监视更改并存储它们。

免责声明：我是vue-persistent-state的作者。

【讨论】：

如果我想用 sessionStorage 怎么办？

【参考方案4】：

使用CustomEvent 并聆听它可以帮助您使localStorage “反应”，在https://***.com/a/61178486/6714319 的类似问题中回答