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 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 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以ROOT权限执行系统命令的方法
2011/02/10 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
javascript工具库代码
2012/03/29 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
浅谈flask源码之请求过程
2018/07/26 Python
Django框架自定义session处理操作示例
2019/05/27 Python
python实现梯度法 python最速下降法
2020/03/24 Python
Python中无限循环需要什么条件
2020/05/27 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
极简的HTML5模版
2015/07/09 HTML / CSS
荷兰电脑专场:Paradigit
2018/05/05 全球购物
Etam德国:内衣精品店
2019/08/25 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
环境工程专业个人求职信
2013/12/05 职场文书
体育馆的标语
2014/06/24 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
新郎新娘答谢词
2015/01/04 职场文书
关于教师节的广播稿
2015/08/19 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python