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

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

javascript 复制代码
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使用使用

javascript 复制代码
import setStorage from 'yourpath/storage.js'
setStorage.setItem({value:yourtoken,name:'token',expires:604800000})//存储token  过期时间是毫秒   我这里是一周
setStorage.getItem('token')//获取token
相关推荐
腾讯TNTWeb前端团队44 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试