page-localstorage
主要用于存储主页面的数据给详情页面使用,并在详情页面返回主页面时进行数据回显。写这个工具的初衷是当时在项目中使用keep-alive
缓存页面时,出现页面卡死的现象。项目中使用的是iview ui
组件库,从主页面跳转到详情页,然后从详情页再回到主页面时,页面直接卡死,然后就想到使用localStorage
来进行客户端缓存,但是写完之后,觉得太乱了,很多地方都用到localStorage
,然后就想着看能不能封装一下,这就是此工具的由来。
github地址。
这个工具包里主要有以下方法:
1、构造函数
在这里主要就是初始化实例,使用bind
函数将this
传递到需要使用实例的函数中。表面this
隐式丢失。
init(pageName){ // 用于保存页面名称 this.pageName = pageName; // 保存页面设置缓存的key this.storageKeys = []; //利用bind来使在调用一些实例方法时,使this实例 this.setStorage = this.setStorage.bind(this); // this._setItem = this._setItem.bind(this); this.removeStorage = this.removeStorage.bind(this); this.getStorage = this.getStorage.bind(this); }
2、获取实例
这里使用了单例模式,来减少性能开销。
function createInstance(pageName) { if (!window.localStorage) { throw new Error("当前浏览器不支持localStorage"); } // this.instanceObj[pageName] 用于保存实例对象 if (this.instanceObj[pageName]) { return this.instanceObj[pageName]; } return this.instanceObj[pageName] = new LocalStorageClass(pageName);
3、设置缓存
在这里会考虑是以setStorage({key:value})
形式传递过来,还是以setStorage(key:value)
的形式传递过来。
同时还对整个页面的key
的数组进行一个缓存。键key
为传递进来的pageName:page
,值value
为该页面需要缓存的数据的key
组成的数组(这里的key
后天添加一个:page
是为了避免key
值重复)。
这里在处理value
为数组的情况时,会将value
转换为字符串,并在字符串最后添加:object
以示区分。
setStorage function(...args){ ... //为页面设置keys数组 this.pageName && localStorage.setItem(`${this.pageName}:${PAGE}`, this.storageKeys.join(",")); }
4、获取缓存
获取缓存时,会区分传递一个key
和多个key
的情况。一个key
时,直接返回key
对应的值;传递多个key
时,返回一个对象。
getStorage function(...args){ ... this._resolveObjectValue(); } function _resolveObjectValue (key) { this._resolveKey(key); let value = localStorage.getItem(key); const len = OBJECT.length + 1; if (typeof value === "string" && value.slice(-len) === `:${OBJECT}`) { value = JSON.parse(value.slice(0, -len)); } return value; },
5、删除缓存
在删除缓存时,考虑三种情况。
pageName
不存在的情况,只删除filterkeys
中对应key
的缓存
// pageName不存在的情况,只删除filterkeys中对应key的缓存 if (!this.pageName) { this._removeItem(filterkeys); return; }
- 没有传递参数的情况 这是删除
pageName
对应页面所有key
对应的缓存值
if (!args || args.length === 0) { //避免因为页面刷新,导致storageKeys为空,到时缓存清除不了的问题 let storageKeys = this.storageKeys; let pageKeysStr = localStorage.getItem(`${this.pageName}:${PAGE}`); if (storageKeys.length === 0 && pageKeysStr) { storageKeys = pageKeysStr.split(","); } const keys = storageKeys.filter(key => !filterkeys.includes(key)); this._removeItem(keys); }
- 删除传入参数中不包含在
filterkeys
中key
的对应值
const keys = args.filter(key => !filterkeys.includes(key)); this._removeItem(keys);
- 删除页面对应的所有
key
localStorage.removeItem(`${this.pageName}:${PAGE}`);