vuex页面刷新后数据丢失

wemall 发布于2019-08-23 14:35 / 670人阅读

摘要：刷新页面，以前申请的内存被释放，重新加载脚本代码，变量要重新赋值。要想刷新后数据不丢失就必须把数据存储在外部，例如等。提供的种客户端存储数据的新方法存储数据存储的数据是永久性的，永不过期作用域是限定在文档源级别的。

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;
    }
};

云服务器 GPU云服务器 mysql重启后数据丢失 mongodb热数据重启后丢失 js刷新页面数据 js页面数据实时刷新数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100822.html

Vue全家桶商城全站升级之引入HTTPS,PWA,错误监控,持续构建。

摘要：免费升级到升级到后，服务器可以开启版本，对比性能和缓存各方面要更好，还有其他新特性，可以启动功能，更好的进行离线缓存，更好的离线体验。 showImg(https://segmentfault.com/img/remote/1460000012773891?w=370&h=661); 在线地址:https://fancy.czero.cn 手机扫描二维码查看: showImg(http...

zengdongbao 2019-08-23 10:22 评论0 收藏0
09.27 顺丰一面经历

摘要：算法题现在有一组数据，一组因子，利用公式可以得到一个结果。和只能存储字符串类型，对于复杂的对象可以使用提供的对象的和来处理应用场景用于组件之间的传值，，则主要用于不同页面之间的传值。例如表示数字到，表示匹配所有的大小写字母。 1. 算法题：现在有一组数据，一组因子a,b,c，利用公式 x*a+y*b+z*c可以得到一个结果。问怎样可以求出因子a,b,c对结果的影响？ 2. 介绍自己技术...

Baaaan 2019-08-23 12:23 评论0 收藏0
addRoutes爬坑记

摘要：简介用动态路由实现权限控制，是一个很的方案不是么初始路由只有登录页，根据用户的查询对应的权限，然后，将获取到的菜单数据放入和浏览器缓存中。 addRoutes简介用动态路由实现权限控制，是一个很nice的方案不是么？初始路由只有登录页，根据用户的id查询对应的权限，然后addRoutes，将获取到的菜单数据放入vuex和浏览器缓存中。动态添加更多的路由规则。参数必须是一个符合 r...

draveness 2019-08-22 16:39 评论0 收藏0