为弥补keep-alive的不足，写了page-localstorage的小工具

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}`);