localStorage设置过期时间

场景

localStorage默认是没有过期时间的，但在某些场景下我们想自动清除某些缓存。

思路： 重写localStorage的get和set方法，在set的时候存储加入时间戳的一个对象，get的时候取出这个对象，判断时间戳即可。

es5实现

Storage.prototype.setExpire = (key, value, expire) => {
	let obj = {
	data: value,
	time: Date.now(),
	expire: expire
	};
	//localStorage 设置的值不能为对象,转为json字符串
	localStorage.setItem(key, JSON.stringify(obj));
}

Storage.prototype.getExpire = key => {
    let val = localStorage.getItem(key);
    if (!val) {
        return val;
    }
    val = JSON.parse(val);
    if (Date.now() - val.time > val.expire) {
        localStorage.removeItem(key);
        return null;
    }
    return val.data;
}

es6 实现

class LocalStorageUtil {
    constructor() {
        this.storage = window.localStorage;
        //过期时间为一天
        this.expired = 1000 * 60;
    }

    /**
     * 设置带过期时间的LocalStorage
     * @param key
     * @param value
     * @param expired
     * @returns {Object}
     */
    set(key, value, expired) {
        let tempObj = new Object();
        tempObj.key = key;
        tempObj.value = value;
        if(expired) {
            tempObj.expired =Date.now() +  expired;
        } else  {
            tempObj.expired =Date.now() +  this.expired;
        }
        const tempStr = JSON.stringify(tempObj);
        this.storage[key] =  tempStr;
        return tempObj;
    }


    /***
     * 获取带过期时间的 storage
     * @param key
     * @returns {null|*}
     */
    get(key) {
        let storageData = this.storage.getItem(key);
        console.log(storageData);
        if(!storageData) {
            console.log(1)
            return null;
        }
        let tempObj = JSON.parse(storageData);
        let expired = tempObj["expired"] || Date.now();
        console.log(expired);
        if(Date.now() > expired) {
            console.log(2)
            this.remove(key);
            return null;
        }

        return tempObj.value
    }

    remove(key) {
        this.storage.removeItem(key);
    }
}

export default LocalStorageUtil;

测试

	const storage = new LocalStorageUtil();
	storage.set("你好", "ddsds");
                
	const storage =new LocalStorageUtil();
	console.log(storage.get("你好"));