web storage设置过期时间

Web Storage的目的是解决通过客户端存储不需要频繁发送回服务器的数据时使用cookie的问题。Web Storage API包含了两个对象：localStorage和sessionStorage，本质上是映射字符串键和值的对象化。localStorage是永久存储机制，sessionStorage是跨会话的存储机制。这两种浏览器存储API提供了在浏览器中不受页面刷新影响而存储数据的两种方式。

1.storage

Window 对象的localStorage 和 sessionStorage 属性引用的是 Storage属性。Storage对象用于保存名/值对数据，直至存储空间上限（由浏览器决定）。一般来说，客户端数据的大小限制是按照每个源（协议、域和端口）来设置的，因此每个源有固定大小的数据存储空间。不同浏览器给localStorage和sessionStorage设置了不同的空间限制，但大多数会限制为每个源5MB。

2.为什么要设置过期时间

浏览器具有多种数据存储方式，然后每种方法都有其局限性。当业务场景中遇到需要客户端存储数据并设置过期时间时，浏览器的数据存储方式仅有cookie支持，然而对于cookie而言，cookie的本职工作并非本地存储，而是用于维护用户跟服务器会话中的状态，同一个域名下的所有请求，都会携带 cookie，这样会增大请求包的大小，对性能造成损耗。

因此更符合需求的方式即为实现web storage设置过期时间。

3.实现web storage 设置过期时间

/** @desc storage相关 */

type TStorageItem = {
    value: any
    expire: string|number
    time: Date
};

type TStorageName = 'localStorage' | 'sessionStorage'

/**
 * @desc 设置storage
 * @param key 键
 * @param value 值
 * @param exprie 过期时间，如果是数值，多长时间后清除，单位毫秒，如果是string，则表示哪个时间清除
 */
const setStorage = (storageName: TStorageName = 'localStorage', key: string, value: any, expire?: string|number) => {
    try {
        const data: TStorageItem = {
            value, // 值
            expire, // 过期时间
            time: new Date(), // 存的时间
        };

        window[storageName].setItem(key, encodeURIComponent(JSON.stringify(data)));
    } catch (err) {
        // 失败不管
    }
};

/**
 * @desc 获取storage
 * @param key 键
 */
const getStorage = (storageName: TStorageName = 'localStorage', key: string) => {
    try {
        const data = window[storageName].getItem(key);
        // 转换
        const obj: TStorageItem = JSON.parse(decodeURIComponent(data));

        const { value, expire, time } = obj;
        const now = new Date().getTime();

        // 判断有没有过期
        if (isNumber(expire)) {
            const delta = now - (new Date(time).getTime());

            if (delta > expire) {
                window[storageName].removeItem(key);

                return null;
            }
        }

        if (isString(expire)) {
            const endTime = new Date(expire).getTime();
            const delta = now - endTime;

            if (delta >= 0) {
                window[storageName].removeItem(key);

                return null;
            }
        }

        return value;
    } catch (err) {
        return null;
    }
};

/** @desc 设置localStorage */
export const setLocalStorage = (key: string, value: any, expire?: string|number) => {
    setStorage('localStorage', key, value, expire);
};

/** @desc 获取localStorage */
export const getLocalStorage = (key: string) => getStorage('localStorage', key);

/** @desc 删除localStorage */
export const delLocalStorage = (key: string) => {
    localStorage.removeItem(key);
};

/** @desc 设置sessionStorage */
export const setSessionStorage = (key: string, value: any, expire?: string|number) => {
    setStorage('sessionStorage', key, value, expire);
};

/** @desc 获取sessionStorage */
export const getSessionStorage = (key: string) => getStorage('sessionStorage', key);

/** @desc 删除localStorage */
export const delSessionStorage = (key: string) => {
    sessionStorage.removeItem(key);
};

/** @desc 正常获取localStorage */
export const localStorageNormal = (key: string, value?: string) => {
    if (value !== undefined) {
        return window.localStorage.setItem(key, value);
    }

    return window.localStorage.getItem(key);
};