js 浏览器缓存 手写缓存工具类

浏览器缓存

数据存储在浏览器内存中，不会被页面刷新消失，存储量有大小限制，不过实在开发中，合理的应用已经可以满足绝大缓存需求

• sessionStorage 会话级别 关闭窗口则自动清除
• localStorage 永久级别 需手动删除

添加缓存

• localStorage.setItem(‘key’,‘value’) 保存一个值
• localStorage.key = value //等同上面

按key查询

• localStorage.getItem(‘key’) //读取
• localStorage.key //等同上

查询所有

• localStorage.valueof() //读取储存的所有数据
• localStorage.key[0] //读取第一条数据

清除缓存

• localStorage.removeItem(‘key’) //删除
• localStorage.clear() 情况所有数据

检查是否存在

• localStorage.hasOwnProperty(‘key’) //查看是否存在 在：true

---

封装缓存类

class LocalStorage {
    /**
     * 设置localStorage 内容
     * @author huangzhongfei
     * @date 2021-11-3
     * @param {String} {key} 主键
     * @param {any} {value} 内容
     * @returns {any}
     */
    static set(key, value) {
        if (typeof key !== 'string') {
            throw 'localstorage -- key必须为字符串'
        }
        value = value || ''
        value = typeof value === 'object' ? JSON.stringify(value) : value
        window.localStorage.setItem(key, value);
    }

    /**
     * 根据Key 查询缓存
     * @author huangzhongfei
     * @date 2021-11-3
     * @param {String} {key} 主键
     * @returns {any}
     */
    static get(key) {
        let value = window.localStorage.getItem(key);
        try {
            return JSON.parse(value)
        } catch (err) {
            return value
        }
    }

    /**
     * 根据Key 清除缓存, 可传多个key值
     * @author huangzhongfei
     * @date 2021-11-3
     * @param {any} {key} 主键
     * @returns {Object}
     */
    static remove() {
        const keys = Array.from(arguments);
        for (let i in keys) {
            window.localStorage.removeItem(keys[i]);
        }
    }

    /**
     * 清除所有缓存
     * @author huangzhongfei
     * @date 2021-11-3
     * @returns {undefined}
     */
    static removeAll() {
        window.localStorage.clear();
    }

}