前端缓存（Storage）之有效期

class Storage {
    constructor(name) {
        this.name = 'storage';
    }
    //设置缓存
    setItem(params) {
        let obj = {
            name: '',
            value: '',
            expires: "",
            startTime: new Date().getTime(),//记录何时将值存入缓存，毫秒级
            endTime: new Date().getTime()//记录过期值，毫秒级  用于getItem知道什么时间过期
        }
        let options = {};
        //将obj和传进来的params合并
        Object.assign(options, obj, params);
        options.endTime = options.startTime +options.expires;
        if (options.expires) {
            //如果options.expires设置了的话
            //以options.name为key，options为值放进去
            localStorage.setItem(options.name, JSON.stringify(options));
        } else {
            //如果options.expires没有设置，就判断一下value的类型
            let type = Object.prototype.toString.call(options.value);
            //如果value是对象或者数组对象的类型，就先用JSON.stringify转一下，再存进去
            if (Object.prototype.toString.call(options.value) == '[object Object]') {
                options.value = JSON.stringify(options.value);
            }
            if (Object.prototype.toString.call(options.value) == '[object Array]') {
                options.value = JSON.stringify(options.value);
            }
            
            localStorage.setItem(options.name, options.value);
        }
    }
    //拿到缓存
    getItem(name) {
        let item = localStorage.getItem(name);
        //先将拿到的试着进行json转为对象的形式
        try {
            item = JSON.parse(item);
        } catch (error) {
            //如果不行就不是json的字符串，就直接返回
            item = item;
        }
        if (item) {
            //如果有startTime的值，说明设置了失效时间
            if (item.startTime) {
                let date = new Date().getTime();
                //何时将值取出减去刚存入的时间，与item.expires比较，如果大于就是过期了，如果小于或等于就还没过期
                if (date - item.startTime > item.expires) {
                    //缓存过期，清除缓存，返回false
                    localStorage.removeItem(name);
                    return null;
                } else {
                    let date = new Date(item.endTime);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                    let Y = date.getFullYear() + '-';
                    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                    let D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
                    let h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
                    let m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
                    let s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
                    item.endTime= Y + M + D + h + m + s;
                    //缓存未过期，返回值
                    return item;
                }
            } else {
                //如果没有设置失效时间，直接返回值
                return item;
            }
        } else {
            return null;
        }
    }
    //移出缓存
    removeItem(name) {
        localStorage.removeItem(name);
    }
    //移出全部缓存
    clear() {
        localStorage.clear();
    }
}

前端缓存都没有记录缓存过期时间只能随一些操作或者浏览器期限默认过期，实际开发中多有不便。看过一个关于缓存设置过期时间得文字，记录下来。好好学习 好好记录。

关于 Storage 得调用

let storage = new Storage();
//添加
var sd = storage.getItem("_sd");
//获取
storage.setItem({
                                                    name: "lcs",//key
                                                    value: "",//key对应值 不仅仅能存字符串  对象数组也可以哦  可以自己实验实验
                                                    expires: 60000 * 30//过期时间 当前时间加上expires

                                                });
//删除
var sd = storage.removeItem("_sd")
//全部移除
var sd = storage.clear()

上面是针对localStorage进行缓存得  ，如果需要用sessionStorage缓存 讲JS文件中得名称替换即可

关于localStorage和sessionStorage

相同点：

1：都是用来存储客户端临时信息的对象。

2：只能存储字符串类型的对象

3：使用相同的API： setItem方法设置

不同点：

1:localStorage生命周期是永久，sessionstorage生命周期为当前窗口或标签页

2:相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面