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

 更新时间:2024年02月29日 08:39:54   作者:广州第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 "文件路径"//引入

2.使用

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue项目中引入Sass实例方法

    vue项目中引入Sass实例方法

    在本文里小编给大家整理的是关于vue项目中引入Sass的相关知识点内容,有需要的朋友们可以测试参考下。
    2019-08-08
  • petite vue 基本使用指南示例小结

    petite vue 基本使用指南示例小结

    petite-vue 是为渐进增强而优化的另一种 Vue 发行版,它提供与标准 Vue 相同的模板语法和反应性心智模型,这篇文章主要介绍了petite vue 基本使用指南,需要的朋友可以参考下
    2024-07-07
  • Vue-router路由该如何使用

    Vue-router路由该如何使用

    这篇文章主要介绍了Vue-router路由该如何使用,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • vue3.0 的 Composition API 的使用示例

    vue3.0 的 Composition API 的使用示例

    这篇文章主要介绍了vue3.0 的 Composition API 的使用示例,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-10-10
  • vue结合element-ui使用示例

    vue结合element-ui使用示例

    这一篇主要是创建一个vue项目并结合饿了么框架element-ui的文章。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • Vue3.x如何操作v-html指令中HTML的DOM和样式

    Vue3.x如何操作v-html指令中HTML的DOM和样式

    在 Vue3.x 中,v-html 指令用于将 HTML 字符串渲染为真实的 DOM 元素,下面我们来看看具体如何操作v-html指令中HTML的DOM和样式吧
    2025-04-04
  • 一文搞明白vue开发者vite多环境配置

    一文搞明白vue开发者vite多环境配置

    Vue是一款流行的JavaScript框架,用于开发动态单页应用程序,本地安装和环境配置是学习和使用Vue的第一步,下面这篇文章主要给大家介绍了关于vue开发者vite多环境配置的相关资料,需要的朋友可以参考下
    2023-06-06
  • vue3无法使用jsx的问题及解决

    vue3无法使用jsx的问题及解决

    这篇文章主要介绍了vue3无法使用jsx的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue3 watch和watchEffect的使用以及有哪些区别

    vue3 watch和watchEffect的使用以及有哪些区别

    这篇文章主要介绍了vue3 watch和watchEffect的使用以及有哪些区别,帮助大家更好的理解和学习vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • 谈谈VUE种methods watch和compute的区别和联系

    谈谈VUE种methods watch和compute的区别和联系

    本篇文章主要介绍了谈谈VUE种methods watch和compute的区别和联系,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08

最新评论