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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
用js实现博客打赏功能
Oct 24 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
详解CocosCreator项目结构机制
Apr 14 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
php5.2.0内存管理改进
2007/01/22 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
jquery dialog键盘事件代码
2010/08/01 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
详解Python中的条件判断语句
2015/05/14 Python
python 文件查找及内容匹配方法
2018/10/25 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
公司员工的自我评价范例
2013/11/01 职场文书
酒店应聘自荐信
2013/11/09 职场文书
初一地理教学反思
2014/01/16 职场文书
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
顶碗少年教学反思
2014/02/21 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
2015年药店工作总结
2015/04/20 职场文书
家长会开场白和结束语
2015/05/29 职场文书