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 相关文章推荐
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
微信小程序用户授权最佳实践指南
May 08 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 strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
javascript跨域刷新实现代码
2011/01/01 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
python使用Tkinter显示网络图片的方法
2015/04/24 Python
在Python中使用元类的教程
2015/04/28 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
python如何实现代码检查
2019/06/28 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
新加坡交友网站:be2新加坡
2019/04/10 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
安全责任协议书
2014/04/21 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
体育专业求职信
2014/07/16 职场文书