关于vuex状态刷新网页时数据被清空问题及解决

目录
  • vuex状态刷新网页时数据被清空
  • vuex状态在页面刷新时,会清空状态

vuex状态刷新网页时数据被清空

vuex状态管理，在网页刷新数据被清空的解决方法。

在main.js中写入下面的代码段（亲测有效）

//刷新保存状态
if (sessionStorage.getItem("store")) {
    store.replaceState(
        Object.assign(
            {},
            store.state,
            JSON.parse(sessionStorage.getItem("store"))
        )
    );
    sessionStorage.removeItem("store")
}

//监听，在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
    sessionStorage.setItem("store", JSON.stringify(store.state));
});

vuex状态在页面刷新时,会清空状态

store写入的state在页面刷新时会被清空，这时可以用sessionStorage缓存状态。因为localStorage会永久保存数据，只有用户手动清除的时候才会清除。cookie存储内存只有4k,并且始终在同源的http请求中携带。而sessionStorage在关闭浏览器页面时就会清空。

因为状态只会在刷新页面的时候清空，所以我们只需要去app.vue里面在页面刷新之前把store保存在sessionStorage里面。在页面加载时读取sessionStorage的值

由于浏览器存储时会自动把对象转换成字符串格式，且不具备转换对象的键和值为字符串的效果，只会转换为[object,object]。因此需要先将对象转换为json字符串存储，取出时再使用JSON.parse()方法转换为json对象。

app.vue

created () {
    // 在页面加载时读取sessionStorage
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }
    // 在页面刷新时将store保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vuex页面刷新数据丢失问题的四种解决方式

    目录 为什么说刷新页面vuex的数据会丢失 第一种方法用sessionStorage 第二种方法是 vuex-along 示例如下 第三种方法是 vuex-persistedstate 示例如下 第四种方法是 vuex-persist 示例如下 结语: 为什么说刷新页面vuex的数据会丢失 刷新页面vuex的数据会丢失属于正常现象,因为JS的数据都是保存在浏览器的堆栈内存里面的,刷新浏览器页面,以前堆栈申请的内存被释放,这就是浏览器的运行机制,那么堆栈里的数据自然就清空了. 第一种方法用sess

  • vuex页面刷新导致数据丢失的解决方案

    解决vuex页面刷新导致数据丢失问题 vuex数据是存在内存当中,当页面刷新之后vuex数据自然会丢失.我们有两种方法解决该问题: 1.使用vuex-along 2.使用localStorage或者sessionStroage 1.使用vuex-along vuex-along的实质也是将vuex中的数据存放到localStorage或者sessionStroage中,只不过这个存取过程这个组件会帮我们完成,我们只需要用vuex的读取数据方式操作就可以了,简单了解一下vuex-along的使用方

  • 解决vuex刷新数据消失问题

    前言 vue构建的单页大型项目中,可能会用到Vuex .Vuex 的状态存储是响应式的,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新. 但是有一个问题就是:vuex的存储的数据只是在页面的中,相当于我们定义的全局变量,刷新之后,里边的数据就会恢复到初始化状态.但是这个情况有时候并不是我们所希望的. 比如,用户已经登录了,我把登录状态放到state中了,一刷新页面,还要重新登录?购物车里的添加的数据,一刷新要重新添加? 解

  • 关于vuex状态刷新网页时数据被清空问题及解决

    目录 vuex状态刷新网页时数据被清空 vuex状态在页面刷新时,会清空状态 vuex状态刷新网页时数据被清空 vuex状态管理,在网页刷新数据被清空的解决方法. 在main.js中写入下面的代码段(亲测有效) //刷新保存状态 if (sessionStorage.getItem("store")) { store.replaceState( Object.assign( {}, store.state, JSON.parse(sessionStorage.getItem("

  • vuex管理状态 刷新页面保持不被清空的解决方案

    mutation文件 import { RECEIVE_PUBLICHTIT } from './mutation-types' //保证刷新页面数据不消失* function storeLocalStore (state) { window.localStorage.setItem("publicTit",JSON.stringify(state)); } export default { [RECEIVE_PUBLICHTIT] (state,{title}){ state.pub

  • jqGrid翻页时数据选中丢失问题的解决办法

    jqGrid翻页时数据选中丢失问题的解决办法

    我在项目中使用jqGrid时,采用异步加载服务器数据,例如点击翻页.搜索时都重新加载数据.这样就会产生一个问题. 问题描述: 当对列表批量删除时,可以选择多个记录信息,选择当前页的第一条,如图: 点击下一页再选择一些记录,点击删除时,则无法删除前面页所选择的记录. 解决办法:jqGrid貌似没有解决这个问题的方法,所以只能自己写代码保存所选择的记录.需要借助jqGrid的两个事件方法: /** multiselect为ture,且点击头部的checkbox时才会触发此事件.aRowids:所有选

  • iexplore.exe在打开网页时CPU使用会100%的解决方法

    CPU占用100%解决办法  一般情况下CPU占了100%的话我们的电脑总会慢下来,而很多时候我们是可以通过做一点点的改动就可以解决,而不必问那些大虾了. 当机器慢下来的时候,首先我们想到的当然是任务管理器了,看看到底是哪个程序占了较搞的比例,如果是某个大程序那还可以原谅,在关闭该程序后只要CPU正常了那就没问题:如果不是,那你就要看看是什幺程序了,当你查不出这个进程是什幺的时候就去google或者 baidu 搜.有时只结束是没用的,在 xp下我们可以结合msconfig里的启动项,把一些不用

  • MyBatis查询数据,赋值给List集合时,数据缺少的问题及解决

    MyBatis查询数据,赋值给List集合时,数据缺少的问题及解决

    目录 MyBatis查询数据赋值给List集合数据缺少 解决办法 Mybatis查询时数据丢失的问题 经过排查得出结论 解决办法 MyBatis查询数据赋值给List集合数据缺少 今天在使用MyBatis查询数据时,发现查出来的数据和List集合的大小不一致,如下图所示,Total为3,但是list集合size为2.   List<ArticleCommentToShow> commentsByArticleId = articleCommentService.getCommentsByArt

  • VueX浏览器刷新如何实现保存数据

    目录 VueX浏览器刷新保存数据 方法一 方法二 刷新浏览器后,Vuex的数据丢失,如何解决? 解决方法 VueX浏览器刷新保存数据 在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 原因: 因为当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值初始化 方法一 在 App.vue 的 created 钩子函数里写下了如下代码; //在页面加载时读取localStorage里的状态信息 localStorage.g

  • JSP防止网页刷新重复提交数据的几种方法

    本篇文章主要介绍了网页如何防止刷新重复提交与如何防止后退的解决方法,具体如下: 提交后禁用提交按钮(大部分人都是这样做的) 如果客户提交后,按F5刷新怎么办? 使用Session 在提交的页面也就是数据库处理之前: if session("ok")=true then response.write "错误,正在提交" response.end end if 数据处理完后,修改session("ok")=false. 数据处理成功马上Redirec

  • 利用Dectorator分模块存储Vuex状态的实现

    1.引言 在H5的Vue项目中,最为常见的当为单页应用(SPA),利用Vue-Router控制组件的挂载与复用,这时使用Vuex可以方便的维护数据状态而不必关心组件间的数据通信.但在Weex中,不同的页面之间使用不同的执行环境,无法共享数据,此时多为通过BroadcastChannel或storage模块来实现数据通信,本文主要使用修饰器(Decorator)来扩展Vuex的功能,实现分模块存储数据,并降低与业务代码的耦合度. 2.Decorator 设计模式中有一种装饰器模式,可以在运行时扩展

随机推荐