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 相关文章推荐
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
JavaScript 克隆数组最简单的方法
Feb 12 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 Javascript
原生js生成图片验证码
Oct 11 Javascript
Javascript使用integrity属性进行安全验证
Nov 07 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
cache_lite试用
2007/02/14 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
两款万能的php分页类
2015/11/12 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
js字符串转成JSON
2013/11/07 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
Python制作词云图代码实例
2019/09/09 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
银行类自荐信
2014/02/04 职场文书
2014年教师节寄语
2014/04/03 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
离职报告格式
2014/11/04 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
实习感想范文
2015/08/10 职场文书