Vue页面刷新记住页面状态的实现


Posted in Javascript onDecember 27, 2019

环境

vue项目,页面有搜索、筛选项等。

需求

页面跳转,切换或者刷新,希望可以记住用户在页面的筛选状态

方案v1

vue有提供一种缓存组件的解决方案 — keep-alive。
缓存不活动的组件实例,而不是销毁它们。

<keep-alive>
   <router-view v-if="$route.meta.keepAlive" class="app-middle-content"/>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive" class="app-middle-content"/>

我们可以使用keep-alive包括路由组件,去缓存页面状态。

但是,这样并不能满足刷新页面依旧可以记住页面状态的需求。因为刷新浏览器页面的时候,等于是刷新了整个vue实例应用,所有vue缓存的数据都会丢失。

方案v2

基于方案1的缺陷,衍生出了方案v2

  • 为了满足刷新页面依然能够记住页面状态,我们需要把页面状态做持久化处理
  • 在localStorage, sessionStorage, cookie三种方案中,我选择了sessionStorage
  • 然后只需要,在页面刷新或者销毁之前,记录页面需要记住的参数。然后在页面加载的时候读取之前存储的参数。

为了可复用和尽量小的代码侵入性。我把相关代码封装成了一个mixin,代码如下:

// 定义一个混入对象
let paramsMemoryMixin = {
 data () {
  return {
   // 记住参数存储的key, 请在引用该mixin的组件中重写
   memoryParamsKey: 'nb-memory-params'
  }
 },
 created: function () {
  this.initParams();
  // 在页面刷新时将筛选信息保存到sessionStorage里
  window.addEventListener('beforeunload', this.onPageUnload);
 },
 methods: {
  initParams () {
   let userParams = JSON.parse(sessionStorage.getItem(this.memoryParamsKey));

   for (let key in userParams) {
    this[key] = userParams[key];
   }
  },
  onPageUnload () {
   sessionStorage.setItem(this.memoryParamsKey, JSON.stringify(this.getMemoryParams()));
  },

  /**
   * 需要记住的页面参数
   * @return { key: value }
   */
  getMemoryParams () {
   throw Error('请重写paramsMemoryMixin的getMemoryParams方法');
  }
 },

 beforeDestroy () {
  window.removeEventListener('beforeunload', this.onPageUnload);
 },

 beforeRouteLeave (to, from, next) {
  this.onPageUnload();
  next();
 }
};

export default paramsMemoryMixin;

然后,在需要缓存的页面,引入该mixin,并重写存储参数的键名: memoryParamsKey 和获取缓存数据的方法 getMemoryParams () 。例如:

import memoryMixin from '文件路径/params-memory-mixin.js';

export default {
 mixins: [ memoryMixin ],
 data () {
  return {
   // 记住参数存储的key
   memoryParamsKey: 'xx-xx-params'
  }
 },
 methods: {
  getMemoryParams () {
   return {
    key1: this.value1,
    key2: this.value2,
    key3: this.value3
   };
  }
 }
}

至此,问题解决。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
javascript学习(一)构建自己的JS库
Jan 02 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
原生js实现分页效果
Sep 23 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 #Javascript
Vue中axios拦截器如何单独配置token
Dec 27 #Javascript
JavaScript获取当前url路径过程解析
Dec 27 #Javascript
前端开发之便利店收银系统代码
Dec 27 #Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 #Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 #Javascript
React中使用UMEditor的方法示例
Dec 27 #Javascript
You might like
德生9700DX电路分析
2021/03/02 无线电
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
js玩一玩WSH吧
2007/02/23 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
入党自我评价范文
2014/02/02 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
大学生社会实践评语
2014/04/25 职场文书
2014年冬季防火方案
2014/05/21 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
教师学习心得体会范文
2016/01/21 职场文书
python神经网络ResNet50模型
2022/05/06 Python