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 相关文章推荐
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
Three.js学习之网格
Aug 10 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
js利用拖放实现添加删除
Aug 27 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 getsiteurl()函数
2009/09/05 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
offsetParent 算法分析
2010/04/05 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
Python ljust rjust center输出
2008/09/06 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
介绍java中初始化块的使用
2012/09/11 面试题
西部世纪面试题
2014/12/05 面试题
自主招生自荐书
2013/11/29 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
勾股定理课后反思
2014/04/26 职场文书
七一讲话心得体会
2014/09/05 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
起诉状范本
2015/05/20 职场文书
2016高考感言
2015/08/01 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书