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 相关文章推荐
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
javascript对象3个属性特征
Nov 17 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
php文件上传的简单实例
2013/10/19 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
JavaScript订单操作小程序完整版
2017/06/23 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
Python对数据库操作
2016/03/28 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
美国购车网站:TrueCar
2016/10/19 全球购物
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
高中毕业生个人自我鉴定
2013/11/24 职场文书
银行求职信怎么写
2014/05/26 职场文书
运动会方队口号
2014/06/07 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
2014年环保局工作总结
2014/12/11 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js