首页 > 网络编程 > JavaScript > javascript类库 > vue.js > 对Storage的过期时间设置,及增删改查

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

2024-02-29 08:39:55 作者：广州第22号吴彦祖

这篇文章主要介绍了VUE对Storage的过期时间设置,及增删改查方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

对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;

如何使用

全局使用

1.在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 "文件路径"//引入