Vuejs2 VueJS-如何在localStorage中查看值？

我有一个

nav

组件，只有在

localStorage

中存储了令牌时才需要显示该组件。当从

localStorage

中删除该令牌时，

nav

组件需要注意该更改并隐藏自身

---

最好的方法是什么

本地存储不是被动的，因此您需要将令牌存储在某个被动的地方。我假设应用程序正在设置并删除您的令牌。如果是这样，最好的处理方法是使用类似Vuex（）的状态

选项1

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

选项2

如果您需要直接在本地存储中设置它，那么您应该在更改状态时将其包括在您的变体中，以设置/取消设置本地存储。这将使您的本地存储和状态保持同步

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

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

---

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

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

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

  // Change localStorage
  deleteTokenFromLocalStorage()
}

相反，如果您的问题是在从另一个窗口删除令牌时隐藏nav，则您可以使用：

---

NB：这在同一窗口内不起作用，但只有在从另一个选项卡中删除令牌时才起作用。

假设您自己设置令牌，请将令牌存储在全局状态并使用保存。该插件适用于不需要使用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
    }
  }
})

从“vue持久存储”导入持久存储；
常量初始状态={
标记：0//如果在localStorage中找到，将被覆盖
};
Vue.use（persistentStorage，initialState）；
新Vue({
数据：{
章节：[“主页”、“编辑”]
//我们从persistentStorage获取“令牌”
},
模板：`
.它

添加一个以使
initialState
在所有Vue实例中可用，以及
监视并存储更改
免责声明：我是。
的作者，使用
CustomEvent
并聆听它可以帮助您使本地存储成为“被动的”，在这里类似的问题中回答
您是否可以控制将令牌设置为本地存储？这是否回答了您的问题？如果我想将其用于会话存储怎么办？
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
    }
  }
})