封装公共storage，优雅的使用缓存

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

我们常常在项目中使用sessionStorage或者localStorage的时候直接使用，这样确实很方便，但是也有很多弊端。比如项目中到处都是set和get，session名字不规范等，对于对象的应该转为字符串，防止内部存在不合法的字符。

定义config

首先定义一个config对象，包含storage的类型，缓存的前缀，过期时间

const config = {
    type: 'sessionStorage', // 本地存储类型 localStorage/sessionStorage
    prefix: 'platform_1.0', // 缓存的名称前缀 可用项目名 + 项目版本
    expire: 1, // 过期时间 单位（秒）
}
复制代码

设置storage

setStorage(key,value,expire)，其中expire的单位是秒，可以统一设置过期时间，也可以根据需要自行传入。

代码如下：

// 设置 setStorage
export const setStorage = (key,value,expire = 0) => {
    if (!value) {
        value = null;
    }

    expire = (expire ? expire : config.expire) * 60000;
    let data = {
        value: value, // 值
        time: Date.now(), // 时间戳
        expire: expire // 过期时间
    }

    window[config.type].setItem(key, JSON.stringify(data));
}
复制代码

获取Storage

对key进行判断，是否存在，防止获取不存在的值而报错，只要在有效期内获取 Storage 值，就对过期时间往后延，如果过期则直接删除该值。并返回 null。

// 获取 getStorage
export const getStorage = (key) => {
    if (!window[config.type].getItem(key) || JSON.stringify(window[config.type].getItem(key)) === 'null'){
        return null;
    }
    
    const storage = JSON.parse(window[config.type].getItem(key));
    let nowTime = Date.now();
    // 过期删除
    if (storage.expire && config.expire*6000 < (nowTime - storage.time)) {
        removeStorage(key);
        return null;
    } else {
        setStorage(key,storage.value);
        return storage.value;
    }
}
复制代码

删除Storage

// 名称前自动添加前缀
const autoAddPrefix = (key) => {
    const prefix = config.prefix ? config.prefix + '_' : '';
    return prefix + key;
}

// 删除 removeStorage
export const removeStorage = (key) => {
    window[config.type].removeItem(autoAddPrefix(key));
}
复制代码

清空 Storage

// 清空 clearStorage
export const clearStorage = () => {
    window[config.type].clear();
}
复制代码

获取所有值

// 获取全部 getAllStorage
export const getAllStorage = () => {
    let len = window[config.type].length // 获取长度
    let arr = []; // 定义数据集
    for (let i = 0; i < len; i++) {
        // 获取key 索引从0开始
        let getKey = window[config.type].key(i)
        // 获取key对应的值
        let getVal = window[config.type].getItem(getKey)
        // 放进数组
        arr[i] = { 'key': getKey, 'val': getVal, }
    }
    return arr
}
复制代码