定时清除 localStorage

JS缓存三种方法

sessionStorage临时的会话存储

只要当前的会话窗口未关闭，存储的信息就不会丢失，即便刷新了页面，或者在编辑器中更改了代码，存储的会话信息也不会丢失。

localStorage永久存储

会一直将数据存储在客户端的储存方式，即使关闭了浏览器，下次打开的时候仍然可以看到之前存储的未主动清楚的数据(即便是杀毒软件或者浏览器自带的清除功能，也不能将localStorage存储的数据清除掉)

Cookie

Cookie是存储在用户计算机上的小文件，保存特定客户端和网站的适量数据，并可以有Web服务器或客户端浏览器访问，允许服务器提供针对特定用户定制的页面，或者页面本身可以包含一些知道cookie中的数据的脚本。

---

共同点：

都是保存在浏览器端，且同源的。

区别：

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；

cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。

而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage
虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

数据有效期不同， sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

作用域不同， sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面； localStorage
在所有同源窗口中都是共享的； cookie也是在所有同源窗口中都是共享的。Web Storage
支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

名称	生命期	大小限制	与服务器通信	是否可以跨域
cookie	一般由服务器生成，可设置失效时间。如果在浏览器端生成 Cookie，默认是关闭浏览器后失效	4KB	每次都会携带在 HTTP 头中，如果使用 cookie 保存过多数据会带来性能问题	一般不可，相同 domain 下可以允许接口请求携带 cookie
localStorage	除非被清除，否则永久保存	5MB	仅在浏览器中保存，不与服务器通信	不可
sessionStorage	仅在当前会话下有效，关闭页面或浏览器后被清除	5MB	仅在浏览器中保存，不与服务器通信	不可

设置 localstorage 定时清除

可以使用storage-timing设置 localStorage 定时删除。

StorageTiming 库用以解决存放在 localStorage 和 sessionStorage 中的数据，对数据进行归纳，同时提供为数据设置有效时间。并使用 typescript 对数据类型和键值进行定义。

安装

npm install --save storage-timing

使用
在src下的 utils文件夹 创建一个changeStorage.js的文件

let storage = {
            /*
            * set 存储方法
            * @ param {String}     key 键
            * @ param {String}     value 值，
            * @ param {String}     expired 过期时间，以毫秒为单位，非必须
            */
            set(key, val, expired) {
                let obj = {
                    data: val,
                    time: Date.now(),
                    expired
                }
                localStorage.setItem(key, JSON.stringify(obj));

            },

            /*
            * set 獲取方法
            * @ param {String}     key 键
            */
            get(key) {
                let val = localStorage.getItem(key);
                if (!val) {
                    return val;
                }
                val = JSON.parse(val);
                if (Date.now() - val.time > val.expired) {
                    localStorage.removeItem(key);
                    return null
                }

                return val.data;
            },
           /*
            * remove 刪除方法
            * @ param {String}     key 键
            */
            remove(key) {
                localStorage.removeItem(key);
            },

        }
        export default storage;

全局使用

在main.js中引入
import storage from "文件路径"//引入
Vue.prototype.$storage=storage;//加入vue的原型对象

在任何文件中 都可直接:
this.$storage.set("userId",'tom',1000000)//创建 OR修改,并在创建时给一个过期时间限制
this.$storage.get("userId",)//获取时,内部会进行判断,当前获取的内容是否过期
this.$storage.remove("userId")//删除