使用 js-cookie 和 localStorage/sessionStorage 构建高效的浏览器缓存管理

一、localStoragesessionStorage 的基本概念
  • localStorage:用于长期存储数据,即使关闭浏览器或重启计算机后仍然存在。适合保存用户设置、偏好等不需要频繁更新的信息。
  • sessionStorage :与 localStorage 类似,但数据仅在当前会话期间有效,即当页面被关闭时数据会被清除。适用于临时性的会话信息,如购物车内容。

两者的主要区别在于数据的生命周期不同,因此在实际应用中可以根据需求选择合适的存储方式。

js-cookie 是一个轻量级的 JavaScript 库,提供了简洁的 API 来读取、写入和删除 Cookies。相比于原生的 document.cookie 接口,js-cookie 更加易用且功能丰富,支持自动编码/解码、路径和域设置等功能。

三、构建统一的缓存管理工具

为了简化 localStoragesessionStorage 的使用,并集成 js-cookie 对 Cookies 的操作,设计了两个模块:LocalSession。每个模块都包含了四个核心方法:set, get, remove, 和 clear。此外,为了确保键名的一致性和可维护性,定义了一个 setKey 方法来为每个键添加前缀。

1. Local 模块 - 浏览器永久缓存
typescript 复制代码
import Cookies from 'js-cookie';

/**
 * window.localStorage 浏览器永久缓存
 */
export const Local = {
	// 设置键名前缀
	setKey(key: string) {
		// @ts-ignore
		return `${__NEXT_NAME__}:${key}`;
	},
	// 设置永久缓存
	set<T>(key: string, val: T) {
		window.localStorage.setItem(Local.setKey(key), JSON.stringify(val));
	},
	// 获取永久缓存
	get(key: string) {
		let json = <string>window.localStorage.getItem(Local.setKey(key));
		return json ? JSON.parse(json) : null;
	},
	// 移除永久缓存
	remove(key: string) {
		window.localStorage.removeItem(Local.setKey(key));
	},
	// 移除全部永久缓存
	clear() {
		window.localStorage.clear();
	},
};
2. Session 模块 - 浏览器临时缓存
typescript 复制代码
/**
 * window.sessionStorage 浏览器临时缓存
 */
export const Session = {
	// 设置临时缓存
	set<T>(key: string, val: T) {
		if (key === 'token') return Cookies.set(key, val as string);
		window.sessionStorage.setItem(Local.setKey(key), JSON.stringify(val));
	},
	// 获取临时缓存
	get(key: string) {
		if (key === 'token') return Cookies.get(key);
		let json = <string>window.sessionStorage.getItem(Local.setKey(key));
		return json ? JSON.parse(json) : null;
	},
	// 移除临时缓存
	remove(key: string) {
		if (key === 'token') return Cookies.remove(key);
		window.sessionStorage.removeItem(Local.setKey(key));
	},
	// 移除全部临时缓存
	clear() {
		Cookies.remove('token');
		window.sessionStorage.clear();
	},
};
四、特殊处理 - token 的管理

Session 模块中,特别处理了 token 的存储和获取。由于 token 通常需要跨多个页面共享,并且可能涉及到安全性问题(如HTTPS),所以选择将其存储在 Cookies 中,而不是 sessionStoragelocalStorage。这样不仅可以保证 token 在不同页面之间的传递,还能利用 js-cookie 提供的安全特性,如设置 HttpOnlySecure 标志。

相关推荐
没有鸡汤吃不下饭35 分钟前
前端【数据类型】 No.1 Javascript的数据类型与区别
前端·javascript·面试
码流之上37 分钟前
【一看就会一写就废 指间算法】设计电子表格 —— 哈希表、字符串处理
javascript·算法
Asort3 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
真夜3 小时前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
艾小码3 小时前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
干就完了13 小时前
js对象常用方法都在这,使用时想不到?不存在的
前端·javascript
艾小码3 小时前
还在硬邦邦跳转页面?Vue这3招让应用丝滑如德芙!
前端·javascript·vue.js
子兮曰4 小时前
🚀前端依赖配置避坑指南:深度解析package.json中devDependencies的常见误解
前端·javascript·npm
forever_Mamba4 小时前
实现一个高性能倒计时:从踩坑到最佳实践
前端·javascript
小帆聊前端4 小时前
JS 原型链深度解读:从混乱到通透,掌握 90% 前端面试核心
javascript