vue 刷新保存数据_vuex数据何时清除

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

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

在项目中我们通常会遇到这样一个情况,客户不允许把信息存储在 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)
    }
  }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/181327.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 木马免杀原理

    木马免杀原理##木马免杀原理###一、实验目的1.了解杀毒软件特征码查杀病毒的基本原理2.掌握木马特征码免杀的原理和方法###二、实验环境1.系统环境:Windows环境,XP环境2.软件工具:灰鸽

    2022年7月4日
    26
  • intellij idea 在线 激活码_通用破解码[通俗易懂]

    intellij idea 在线 激活码_通用破解码,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月16日
    138
  • mysql数据库命令大全菜鸟_mysql常用命令[通俗易懂]

    mysql数据库命令大全菜鸟_mysql常用命令[通俗易懂]连接:mysql-h主机地址-u用户名-p用户密码(注:u与root可以不用加空格,其它也一样)创建授权:grantselecton数据库.*to用户名@登录主机identifiedby\”密码\”修改密码:mysqladmin-u用户名-p旧密码password新密码删除授权:revokeselect,insert,update,deleteom*.*f…

    2022年6月17日
    35
  • http协议汇总

    http协议汇总

    2021年7月6日
    93
  • linux 命令行移动文件

    linux 命令行移动文件在当前文件夹下打开命令行 输入 cp 文件名路径验证已经移动过去 cd 路径 lltip 写文件名时可以先写开头几个字母 然后使用 ctrl tab 补充完整文件名

    2025年11月17日
    2
  • 详解 & 0xff 的作用

    详解 & 0xff 的作用首先我们要都知道,&表示按位与,只有两个位同时为1,才能得到1,0x代表16进制数,0xff表示的数二进制11111111占一个字节.和其进行&操作的数,最低8位,不会发生变化.下面着重来说说&0xff都有哪些应用:1.只是为了取得低八位通常配合移位操作符>>使用例如:javasocket通信中基于长度的成帧方法中,如果发送的信息长度小于65…

    2022年6月19日
    45

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号