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 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
JS控制表单提交的方法
Jul 09 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
vue el-table实现自定义表头
Dec 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
Array对象方法参考
2006/10/03 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
Python模拟登录验证码(代码简单)
2016/02/06 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
机电专业个人求职信范文
2013/12/30 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL