VUE对Storage的过期时间设置,及增删改查

面试过程中,我们经常会被问到storage相关的问题和操作;
下边我就基于实际项目开发,来讲述这些日常的操作问题;

原理:在储存storage的过程中,储存一个时间戳进去,
再次获取时, 判断当前时间-储存时的时间 是否>设置的时常,
如果超时了,清空本地的storage,反之,把正确的内容返回出去

不多叭叭 上代码:
根据需求,自己在合适的地方编写代码,我在项目中一般是在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的原型对象

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

局部使用:

1.在该文件(vue组件  js文件种)引用
import Storage from "文件路径"//引入

2.使用
Storage.set("userId",'jack',1000)//创建 OR修改
Storage.get("userId",)//获取
Storage.remove("userId")//删除

OK,就酱紫.你学废了啵 T_T