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

时间:2021-1-8 作者:admin

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);
}
  • 删除传入参数中不包含在filterkeyskey的对应值
const keys = args.filter(key => !filterkeys.includes(key));
this._removeItem(keys);
  • 删除页面对应的所有key
localStorage.removeItem(`${this.pageName}:${PAGE}`);
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。