Vue 刷新页面保存 vuex 信息

最新推荐文章于 2024-07-02 17:47:34 发布

巨砲

最新推荐文章于 2024-07-02 17:47:34 发布

阅读量756

点赞数

文章标签： vue.js javascript es6

本文链接：https://blog.csdn.net/clearjj/article/details/111206207

版权

在项目中我们通常会遇到这样一个情况，客户不允许把信息存储在 sessionStorage / localStorage 因为这样会暴露一些存储信息，安全起见只能存储在 vuex 里面，但是 vuex 刷新之后 state 里面的信息依旧会被清除，我们的思路是刷新之前把所有的数据存储在 localStorage 里面，刷新后取出里面的数据，并清除 local/session 里面的记录，这种全局的我们可以放在 app.vue 里面，下面是代码实现

// app.vue
created(){
    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{
      localStorage.setItem("userComMsg",JSON.stringify(this.$store.state))
    });

    //在页面加载时读取localStorage里的状态信息
    if(localStorage.getItem("userComMsg")){
      Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userComMsg")));
      //使用后清除内存
      setTimeout(function () {
        localStorage.removeItem("userComMsg");
      },300)
    }
  }