VUE对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")//删除