vue的html自动刷新,Vue页面刷新记住页面状态的实现
環(huán)境
vue項(xiàng)目，頁面有搜索、篩選項(xiàng)等。
需求
頁面跳轉(zhuǎn)，切換或者刷新，希望可以記住用戶在頁面的篩選狀態(tài)
方案v1
vue有提供一種緩存組件的解決方案 — keep-alive。
緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。
我們可以使用keep-alive包括路由組件，去緩存頁面狀態(tài)。
但是，這樣并不能滿足刷新頁面依舊可以記住頁面狀態(tài)的需求。因?yàn)樗⑿聻g覽器頁面的時(shí)候，等于是刷新了整個(gè)vue實(shí)例應(yīng)用，所有vue緩存的數(shù)據(jù)都會(huì)丟失。
方案v2
基于方案1的缺陷，衍生出了方案v2
為了滿足刷新頁面依然能夠記住頁面狀態(tài)，我們需要把頁面狀態(tài)做持久化處理
在localStorage, sessionStorage, cookie三種方案中,我選擇了sessionStorage
然后只需要，在頁面刷新或者銷毀之前，記錄頁面需要記住的參數(shù)。然后在頁面加載的時(shí)候讀取之前存儲(chǔ)的參數(shù)。
為了可復(fù)用和盡量小的代碼侵入性。我把相關(guān)代碼封裝成了一個(gè)mixin，代碼如下：
// 定義一個(gè)混入對(duì)象
let paramsMemoryMixin = {
data () {
return {
// 記住參數(shù)存儲(chǔ)的key, 請(qǐng)?jiān)谝迷搈ixin的組件中重寫
memoryParamsKey: 'nb-memory-params'
}
},
created: function () {
this.initParams();
// 在頁面刷新時(shí)將篩選信息保存到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()));
},
/**
* 需要記住的頁面參數(shù)
* @return { key: value }
*/
getMemoryParams () {
throw Error('請(qǐng)重寫paramsMemoryMixin的getMemoryParams方法');
}
},
beforeDestroy () {
window.removeEventListener('beforeunload', this.onPageUnload);
},
beforeRouteLeave (to, from, next) {
this.onPageUnload();
next();
}
};
export default paramsMemoryMixin;
然后，在需要緩存的頁面，引入該mixin，并重寫存儲(chǔ)參數(shù)的鍵名： memoryParamsKey 和獲取緩存數(shù)據(jù)的方法 getMemoryParams () 。例如：
import memoryMixin from '文件路徑/params-memory-mixin.js';
export default {
mixins: [ memoryMixin ],
data () {
return {
// 記住參數(shù)存儲(chǔ)的key
memoryParamsKey: 'xx-xx-params'
}
},
methods: {
getMemoryParams () {
return {
key1: this.value1,
key2: this.value2,
key3: this.value3
};
}
}
}
至此，問題解決。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
總結(jié)
以上是生活随笔為你收集整理的vue的html自动刷新,Vue页面刷新记住页面状态的实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java元数据是什么_用存储过程和 JA
- 下一篇： vue 监听map数组变化_解决vue无