简介 说明
本文介绍如何使用localStorage设置数据的过期时间。 浏览器给我们提供了两个存储方案,一个是localStorage,一个是sessionStorage。 存到localStorage中的信息是永久存储,如果用户不手动删除或者代码中没有localStorage.removeItem(xxx)这样的调用那这个信息将永远不会消失; 在sessionStorage中存储的信息则是一次性的,用户关掉网页了下一次在进入这个网页信息就不会再存储了。 但是在实际项目的运用中,这两个方案的表现都不是那么令人满意。就比如说,我想要实现用户登录之后七天之内不需要再次登录这样的功能,token生成了之后,后端设置了这个token的过期时间为7天,ok,传到前端, 但是针对浏览器目前提供的存储方案,我却只能选择永久存储和一次性存储。一次性存储肯定是不能满足需求的,永久存储也违背了我的意愿。 localStorage是不支持设置过期时间的,cookie虽然支持设置过期时间但它存的数据量很小。所以在需要存一些带过期时间的数据时,就要手写工具来实现。 思路 存数据时:将value封装到一个对象里,这个对象里额外加一个过期时间。 读数据时:如果当前时间超过了过期时间,则返回null或者空对象;否则返回value。
最开始是cookie存储的,后面发现后端给的token太大了,就改用localStorage了,直接上代码
`function createLocalStorage() { /** 默认缓存期限为1天 */ const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 1; function set(key, value, expire = DEFAULT_CACHE_TIME) { const storageData = { value, expire: expire !== null ? new Date().getTime() + expire * 1000 : null, }; const json = JSON.stringify(storageData);
localStorage.setItem(key, json);
}
function get(key) {
try {
const json = localStorage.getItem(key);
if (json) {
let storageData = null;
storageData = json;
if (storageData) {
const { value, expire } = JSON.parse(storageData);
// 在有效期内直接返回
if (expire === null || expire >= Date.now()) {
return value;
}
}
remove(key);
return null;
}
return null;
} catch (error) {
return null;
}
}
function remove(key) {
localStorage.removeItem(key);
}
function clear() {
localStorage.clear();
}
return {
set,
get,
remove,
clear,
};
}
export const localStg = createLocalStorage(); `
#使用方法很简单
import { localStg } from "@/utils/storage/index"; // 清除localStorage localStg.clear(); // 获取 localStg.get("Tokens") //存储 localStg.set("Tokens", res.data); // 移除 localStg.remove('tokens');