vuex页面刷新后数据丢失的方法

 更新时间:2019年01月17日 08:26:56   作者:jrue  
这篇文章主要介绍了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;
  }
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue遍历中存在el-form之踩坑记录

    vue遍历中存在el-form之踩坑记录

    这篇文章主要介绍了vue遍历中存在el-form之踩坑记录,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • VSCode中写Vue没有代码提示的解决步骤(附图文)

    VSCode中写Vue没有代码提示的解决步骤(附图文)

    这篇文章主要给大家介绍了关于VSCode中写Vue没有代码提示的解决步骤,代码提示功能能够大大的提高开发效率,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • Element基于el-input数字范围输入框的实现

    Element基于el-input数字范围输入框的实现

    本文主要介绍了 Element基于el-input数字范围输入框的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 在vue中实现echarts随窗体变化

    在vue中实现echarts随窗体变化

    这篇文章主要介绍了在vue中实现echarts随窗体变化,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 浅析Vue3中的逻辑复用

    浅析Vue3中的逻辑复用

    这篇文章主要为大家详细介绍了Vue3中逻辑复用的相关知识,文中的示例代码简洁易懂,对我们深入了解Vue3有一定的帮助,需要的小伙伴可以参考下
    2023-12-12
  • Element Plus 日期选择器获取选中的日期格式(当前日期/时间戳格式)

    Element Plus 日期选择器获取选中的日期格式(当前日期/时间戳格式)

    如果想要获取选中的日期时间就需要通过,Element Plus 日期选择器 format属性和value-format属性,format指定输入框的格式,value-format 指定绑定值的格式,本篇文章就给大家介绍Element Plus 日期选择器获取选中的日期格式(当前日期/时间戳格式),感兴趣的朋友一起看看吧
    2023-10-10
  • Vue2路由动画效果的实现代码

    Vue2路由动画效果的实现代码

    本篇文章主要介绍了Vue2路由动画效果的实现代码,可以根据不同的路径去改变动画的效果,有兴趣的可以了解一下
    2017-07-07
  • vue3使用vite搭建的项目需要安装的插件/配置方式

    vue3使用vite搭建的项目需要安装的插件/配置方式

    这篇文章主要介绍了vue3使用vite搭建的项目需要安装的插件/配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue.js编译时给生成的文件增加版本号

    vue.js编译时给生成的文件增加版本号

    这篇文章主要介绍了vue.js编译时给生成的文件增加版本号,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 基于Vue制作组织架构树组件

    基于Vue制作组织架构树组件

    最近公司在做一个基于vue开发的项目,项目需要开发一个展示组织架构的树组件,在网上搜了半天,没有找到合适的,下面小编给大家分享一个基于Vue制作组织架构树组件,需要的朋友参考下吧
    2017-12-12

最新评论