vuex页面刷新后数据丢失

1. 原因

  • (1)js代码是运行在内存中的,代码运行时的所有变量、函数都是保存在内存中。
    (2)刷新页面,以前申请的内存被释放,重新加载脚本代码,变量要重新赋值。
    (3)要想刷新后数据不丢失就必须把数据存储在外部,例如:Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储。

2. HTML5提供的2种客户端存储数据的新方法

  • localStorage存储数据:
    (1)存储的数据是永久性的,永不过期;
    (2)作用域是限定在文档源级别的。同源的文档间共享同样的localStorage数据(不论该源的脚本是否真正的访问localStorage)。
    他们可以互相读取对方的数据,甚至可以覆盖对方的数据。但是,非同源的文档间互相都不能读取或者覆盖对方的数据。
    (即使他们运行的脚本是来自同一台第三方的服务器也不行)。
  • sessionStorage存储数据:
    (1)会话,当浏览器关闭时会话结束并清除数据,有时间期限;
    (2)存储数据的有效期和存储数据的脚本所在的最顶层的窗口或者是浏览器标签页是一样的,一旦窗口或者标签页被永久关闭了,
    那么所有通过sessionStorage存储的数据也都被删除了。

3.具体实现(登入后保存状态,退出后移除状态)

// vuex mutations
const mutations = {
    setToken(state, token) {
        // 保存用户认证Token
        sessionStorage.setItem('token', token);
        state.token = token;
    },
    setUser(state, user) {
        // 保存用户信息
        sessionStorage.setItem('user', JSON.stringify(user));
        state.user = user;
    },
    // 注销登录,清除token
    logout(state) {
        state.token = null;
        state.user = null;
        sessionStorage.removeItem('token');
        sessionStorage.removeItem('user');
    }
};

// vuex getters
const getters = {
    getToken(state){
        if(state.token === null){
            state.token = sessionStorage.getItem('token')
        }
        return state.token;
    },
    // 获取当前用户登录信息
    getUser(state) {
        if(state.user === null) {
            state.user = JSON.parse(sessionStorage.getItem('user'));
        }
        return state.user;
    }
};

努力可以改变能力

266 声望
8 粉丝
0 条评论
推荐阅读
mysql查询数据时自动生成序号
方法一,声明一个外部变量,每行数据为它自增。 {代码...} 方法二,使用(@i:=@i+1) {代码...}

前端小菜阅读 324

「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs40阅读 4.8k评论 5

封面图
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.7k评论 9

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城32阅读 7.3k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco24阅读 2.2k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan25阅读 1.7k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图

努力可以改变能力

266 声望
8 粉丝
宣传栏