Vue中使用localStorage存储token并设置时效

 更新时间:2023年06月07日 15:11:19   作者:Resssssss  
这篇文章主要为大家介绍了Vue中使用localStorage存储token并设置时效,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

引言

相信大家平常的有的业务逻辑,就是登录之后要把token存下来,之前的项目大多数用的都是cookie,在这次的项目我用了vue-cookies保存token

保存没有问题 但是我需要再main.js中写一个全局的方法需要获取cookie中的token 这时候就发现了 无论是我用vue-cookies的方法 还是js原生的获取cookie都获取不到 百度了很多方法都没有实现

于是还是决定使用localStorage localStorage是没有时效设置的 所以需要自己写一个方法来设置时效
代码参考 https://www.jb51.net/article/258870.htm

首先新建一个js文件用来放封装的方法

storage.js

let myStorage=(function() {
    function setItem(params) {//存入localStorage方法
        // 存入的参数
        const obj = {
            name: "",   // 存入的名字
            value: "",   // 存入的值
            expires: "",   // 过期时间
            startTime: new Date().getTime()  //存入的时间
        }
        const options = {};// 将obj 和传进来的params 合并  放到options里面 实现js中浅拷贝
        Object.assign(options, obj, params);
        // 判断用户是否设置了过期时间
        if (options.expires) {
            //  以options.name为key,    options为值放进去
            localStorage.setItem(options.name, JSON.stringify(options));
        } else {
            // 如果 options.expires 没有设置的话, 就判断一下value的类型
            // 注意 我们 的 localStorage 只能存储字符串 像是数组和对象要转换下
            let type = Object.prototype.toString.call(options.value);
            if (type == '[object Object]' || type == '[object Array]') {
                options.value = JSON.stringify(options.value);
            }
            localStorage.setItem(options.name, options.value);
        }
    }
    // 获取数值
    function getItem(name) {
        let item = localStorage.getItem(name);
        // 判断 item 是否存在 
        if (item) {
            // 先将取到的对象 看能转换成object 对象格式,不能就说明不是json字符串形式
            try {
                item = JSON.parse(item);
            } catch (error) {
                item = item;
            }
            // 如果有expires的值,说明设置了失效时间
            if (item.expires) {
                    // 获取当前时间
                let now = new Date().getTime();
                // 当前的时间和存入时候的时间 进行相减 和过期时间进行比较
                // 大于就说明过期了 清除存储  小于或者等于 就没有过期 
                if (now - item.startTime > item.expires) {
                    localStorage.removeItem(name);
                    return false;  // 返回一个状态值
                } else {
                    //缓存未过期,返回值
                    return item.value;
                }
            } else {
                // 没有设置过期时间,直接返回值
                return item;
            }
        }else{
            return false; // 如果item 值为undefined 则说明没有存储 返回false
        }
    }
    // 移除指定的缓存
    function removeItem(name) {
        localStorage.removeItem(name);
    }
    // 移除所有的存储数据
    function clear() {
        localStorage.clear();
    }
    return {    // 返回 执行接口
        setItem,
        getItem,
        removeItem,
        clear
    }
})();
export default myStorage; //暴露方法

核心的代码就是这些

引入这个js

import setStorage from 'yourpath/storage.js'

接下来就可以使用了

setStorage.setItem({value:yourtoken,name:'token',expires:604800000})//存储token  过期时间是毫秒   我这里是一周
setStorage.getItem('token')//获取token

以上就是Vue中使用localStorage存储token并设置时效的详细内容,更多关于Vue使用localStorage存储token并设置时效的资料请关注脚本之家其它相关文章!

相关文章

  • 解决vue+router路由跳转不起作用的一项原因

    解决vue+router路由跳转不起作用的一项原因

    这篇文章主要介绍了解决vue+router路由跳转不起作用的一项原因,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vite+vue3中使用mock模拟数据问题

    vite+vue3中使用mock模拟数据问题

    这篇文章主要介绍了vite+vue3中使用mock模拟数据问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue.directive自定义指令的使用详解

    Vue.directive自定义指令的使用详解

    本篇文章主要介绍了Vue.directive自定义指令的使用详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • Vue项目配置、切换主题颜色详细教程(mixin+scss方式,简单高效)

    Vue项目配置、切换主题颜色详细教程(mixin+scss方式,简单高效)

    这篇文章主要给大家介绍了关于Vue项目配置、切换主题颜色(mixin+scss方式)的相关资料,根据预设的配色方案,在前端实现动态切换系统主题颜色,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • Vue实现Chrome小恐龙游戏的示例代码

    Vue实现Chrome小恐龙游戏的示例代码

    Google 给 Chrome 浏览器加了一个有趣的彩蛋,本文就详细的介绍一下Vue实现Chrome小恐龙游戏的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2022-04-04
  • 在vue中实现跨域方法小结

    在vue中实现跨域方法小结

    在Web开发中,跨域问题是一大挑战,跨域是指网络请求从一个域名发起,而请求的目标资源位于另一个不同的域名下,通常使用Vue CLI的代理来解决跨域问题,而在生产环境中,可以通过后端配置CORS或使用Nginx反向代理,或者通过服务器中转来解决跨域问题
    2023-10-10
  • vue在线动态切换主题色方案

    vue在线动态切换主题色方案

    这篇文章主要介绍了vue在线动态切换主题色方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • vue组件实现列表自动无限循环的方法

    vue组件实现列表自动无限循环的方法

    最近刚好有个功能需要实现列表的无限循环滚动,这篇文章主要给大家介绍了关于vue组件实现列表自动无限循环的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • Vue子组件关闭后调用刷新父组件的实现

    Vue子组件关闭后调用刷新父组件的实现

    这篇文章主要介绍了Vue子组件关闭后调用刷新父组件的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • 基于Vue制作组织架构树组件

    基于Vue制作组织架构树组件

    最近公司在做一个基于vue开发的项目,项目需要开发一个展示组织架构的树组件,在网上搜了半天,没有找到合适的,下面小编给大家分享一个基于Vue制作组织架构树组件,需要的朋友参考下吧
    2017-12-12

最新评论