简介 说明

本文介绍如何使用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');