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,水平有待提高
Jan 31 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
js日期联动示例
May 02 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
vue 调用 RESTful风格接口操作
Aug 11 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 foreach 使用&(与运算符)引用赋值要注意的问题
2010/02/16 PHP
php object转数组示例
2014/01/15 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
js 深拷贝函数
2008/12/04 Javascript
jQuery 使用手册(二)
2009/09/23 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
Python实现读取并保存文件的类
2017/05/11 Python
python基础之入门必看操作
2017/07/26 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
Python pymsql模块的使用
2020/09/07 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
信息工程学院毕业生推荐信
2013/11/05 职场文书
实习生自我鉴定
2013/12/12 职场文书
秦兵马俑教学反思
2014/02/07 职场文书
销售内勤岗位职责
2014/04/15 职场文书
运动会加油稿20字
2014/11/15 职场文书
停电通知范文
2015/04/16 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
MySQL 查询速度慢的原因
2021/05/25 MySQL
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL