vue单页应用在页面刷新时保留状态数据的方法


Posted in Javascript onSeptember 21, 2018

在Vue单页应用中,如果在某一个具体路由的具体页面下点击刷新,那么刷新后,页面的状态信息可能就会丢失掉。这时候应该怎么处理呢?如果你也有这个疑惑,这篇文章或许能够帮助到你

一、问题

现在产品上有个需求:单页应用走到某个具体的页面,然后点击刷新后,刷新的页面要与刷新前的页面要保持一致。

这时候就需要我们保存刷新之前页面的状态。

二、一种解决方案

在这个Vue单页应用中,王二是用Vuex作为状态管理的,一开始王二的思路是将Vuex里的数据同步更新到localStorage里。

即:一改变vuex里的数据,便触发localStorage.setItem 方法,参考如下代码:

import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex)
 
function storeLocalStore (state) {
  window.localStorage.setItem("userMsg",JSON.stringify(state));
}
 
export default new Vuex.Store({
  state: {
    username: "王二",
    schedulename: "标题",
    scheduleid: 0,
  },
  mutations: {
    storeUsername (state,name) {
      state.username = name
      storeLocalStore (state)
    },
    storeSchedulename (state,name) {
      state.schedulename = name
      storeLocalStore (state)
    },
    storeScheduleid (state,id) {
      state.scheduleid = Number(id)
      storeLocalStore (state)
    },
  }
})

然后在页面加载时再从localStorage里将数据取回来放到vuex里,于是王二在 App.vue 的 created 钩子函数里写下了如下代码:

localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));
 
//考虑到第一次加载项目时localStorage里没有userMsg的信息,所以在前面要先做判断

这样就能比较圆满的解决问题了。

三、另一种解决方案

以上的解决方法由于要频繁地触发 localStorage.setItem 方法,所以对性能很不友好。而且如果一直同步vuex里的数据到localStorage里,我们直接用localStorage做状态管理好了,似乎也没有必要再用vuex。

这时候王二想,如果有什么方法能够监听到页面的刷新事件,然后在那个监听方法里将Vuex里的数据储存到localStorage里,那该多好。

很幸运,还真有这样的监听事件,我们可以用 beforeunload 来达到以上目的,于是王二在 App.vue 的 created 钩子函数里写下了如下代码:

//在页面加载时读取localStorage里的状态信息
  localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));
  
  //在页面刷新时将vuex里的信息保存到localStorage里
  window.addEventListener("beforeunload",()=>{
    localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
  })

这样的话,似乎就比较完美了。

2018年03月27日补充:

王二在使用上述方法时,遇到了一个问题,就是:在开发阶段,如果在Vuex里添加新的字段,则新的字段不能被保存到localStorage里,于是上述代码修改如下:

//在页面加载时读取localStorage里的状态信息
  localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
  
  //在页面刷新时将vuex里的信息保存到localStorage里
  window.addEventListener("beforeunload",()=>{
    localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
  })

以上这篇vue单页应用在页面刷新时保留状态数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 #Javascript
vue中设置、获取、删除cookie的方法
Sep 21 #Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 #Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 #Javascript
React实现全局组件的Toast轻提示效果
Sep 21 #Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 #Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 #Javascript
You might like
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
Python 不同对象比较大小示例探讨
2014/08/21 Python
Python实例一个类背后发生了什么
2016/02/09 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
Linux文件系统类型
2012/02/15 面试题
年终自我鉴定
2013/10/09 职场文书
营销专业应届生求职信
2013/11/26 职场文书
运动会邀请函范文
2014/02/06 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
办公室副主任职责范本
2014/03/08 职场文书
公司开除员工通知
2015/04/22 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
python3 hdf5文件 遍历代码
2021/05/19 Python