環境
vue項目，頁面有搜索、篩選項等。
需求
頁面跳轉，切換或者刷新，希望可以記住用戶在頁面的篩選狀態
方案v1
vue有提供一種緩存組件的解決方案 — keep-alive。
緩存不活動的組件實例，而不是銷毀它們。
我們可以使用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
};
}
}
}
至此，問題解決。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
