为localStorage设置过期时间,关闭浏览器清空localStorage

我们知道localStorage是会一直保存在浏览器里面的,除非人为清除,否则会一直记录,但有些情况下我们只想让它保留几天时间,所以这次我们为localStorage设置一个过期时间.
简单的说就是让它存进去的时候保留一个存入时间,获取的时候让当前时间与存入时间对比一下,看是否过期,过期了就清除这个localStorage

现在根据需求封装一个Storage

class Storage {
    constructor(name) {
        this.name = 'storage';
    }
    //设置缓存
    setItem(key, value, expires) {
        let obj = {
            key: key, // key
            value: value, // 存入的值
            expires: expires,//过期时间 毫秒
            startTime: new Date().getTime()//记录何时将值存入缓存，毫秒级
        }
        if (expires) {
        // 存在过期时间
            localStorage.setItem(key, JSON.stringify(obj));
        } else {
            //判断value是否是对象 如果是对象 就转为字符串存入 否则直接存入
            let type = Object.prototype.toString.call(value);
            if (type == '[object Object]') {
                value = JSON.stringify(value);
            }
            if (type == '[object Array]') {
                value = JSON.stringify(value);
            }
            localStorage.setItem(key, value);
        }
    }
    //获取localStorage
    getItem(name) {
        let item = localStorage.getItem(name);
        //先将拿到的试着进行json转为对象的形式
        try {
            item = JSON.parse(item);
        } catch (error) {
            //如果不行就不是json的字符串，就直接返回
            item = item;
        }
        if(!item){
            return null
        }
        //如果有startTime的值，说明设置了失效时间
        if (item.startTime) {
            let date = new Date().getTime();
            //何时将值取出减去刚存入的时间，与item.expires比较，如果大于就是过期了，如果小于或等于就还没过期
            if (date - item.startTime > item.expires) {
                //缓存过期，清除缓存，返回false
                localStorage.removeItem(name);
                return false;
            } else {
                //缓存未过期，返回值
                return item.value;
            }
        } else {
            //如果没有设置失效时间，直接返回值
            return item;
        }
    }
    //移出缓存
    removeItem(name) {
        localStorage.removeItem(name);
    }
    //移出全部缓存
    clear() {
        localStorage.clear();
    }
}
export default new Storage();
// Storage.setItem("is_root", is_root, expires);

关闭浏览器时清空localStorage

之前看了很多关于怎么区别浏览器关闭\刷新事件等等的文章,感觉很复杂效果也不好,最后还是用了sessionStorage来做为判断,因为sessionStorage会随着页面的关闭而清空的,所以我们可以在入口文件这里监听一下sessionStorage是否存在,不存在就直接清空localstorage.
但是这个弊端就是不能在两个标签页展示页面,因为另外一个标签页打开就是另一个会话了

// main.js
// 在登录页面 把token存入localStorage里面时 再存一个isClear在seesionStorage里
// 如果用户不需要保存信息 那么就判断sessionStorage.getItem('isClear')是否存在 不存在就清空
if (!sessionStorage.getItem('isClear') && !Storage.getItem("isSaveloginInfo")) {
    Storage.clear()
}