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

总结

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

相关文章

  • webpack4+Vue搭建自己的Vue-cli项目过程分享

    webpack4+Vue搭建自己的Vue-cli项目过程分享

    这篇文章主要介绍了webpack4+Vue搭建自己的Vue-cli,对于vue-cli的强大,使用过的人都知道,极大的帮助我们降低了vue的入门门槛,感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-08-08
  • vue demi支持sfc方式的vue2vue3通用库开发详解

    vue demi支持sfc方式的vue2vue3通用库开发详解

    这篇文章主要为大家介绍了vue demi支持sfc方式的vue2vue3通用库开发详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue如何封装选择文件组件和选择文件api

    vue如何封装选择文件组件和选择文件api

    这篇文章主要介绍了vue如何封装选择文件组件和选择文件api问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue默认插槽,具名插槽,作用域插槽定义及使用方法

    Vue默认插槽,具名插槽,作用域插槽定义及使用方法

    这篇文章主要介绍了Vue默认插槽,具名插槽,作用域插槽定义及使用方法,插槽的作用是在子组件中某个位置插入父组件的自定义html结构和data数据,下面详细内容需要的小伙伴可以参考一下
    2022-03-03
  • 使用Vue+MySQL实现登录注册的实战案例

    使用Vue+MySQL实现登录注册的实战案例

    第一次用Vue+MySQL实现注册登录功能,就已经踩了很多坑,下面这篇文章主要给大家介绍了关于使用Vue+MySQL实现登录注册案例的相关资料,需要的朋友可以参考下
    2022-05-05
  • 一文带你详细了解vue axios的封装

    一文带你详细了解vue axios的封装

    对请求的封装在实际项目中是十分必要的,它可以让我们统一处理 http 请求,比如做一些拦截,处理一些错误等,本篇文章将详细介绍如何封装 axios 请求,需要的朋友可以参考下
    2023-09-09
  • Vue利用AJAX请求获取XML文件数据的操作方法

    Vue利用AJAX请求获取XML文件数据的操作方法

    在现代Web开发中,从前端框架到后端API的交互是必不可少的一部分,Vue.js作为一个轻量级且功能强大的前端框架,支持多种方式与服务器通信,从而获取或发送数据,本文将详细介绍如何在Vue.js项目中使用AJAX请求来获取XML格式的数据,需要的朋友可以参考下
    2024-09-09
  • vue实现跳转接口push 转场动画示例

    vue实现跳转接口push 转场动画示例

    今天小编就为大家分享一篇vue实现跳转接口push 转场动画示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue实现多栏布局拖拽

    vue实现多栏布局拖拽

    这篇文章主要为大家详细介绍了vue实现多栏布局拖拽,改变盒子的宽度,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue项目中定义全局变量、函数的几种方法

    vue项目中定义全局变量、函数的几种方法

    这篇文章主要介绍了vue项目中定义全局变量、函数的几种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11

最新评论