SOURCE

浏览器存储方案：
1.SessionStorage（会话存储）：
数据存储在浏览器内存中
仅在当前标签页/窗口有效
跨标签页：不共享（每个标签页独立）
数据类型：仅支持字符串
//设置数据
sessionStorage.setItem('userName','tom')
//读取数据
const username =sessionStorage.getItem('userName')
// 删除数据
sessionStorage.removeItem('username');
// 清空所有
sessionStorage.clear();
2.LocalStorage（本地存储）
数据持久化存储在浏览器中
除非主动清除，否则永久保存
跨标签页：共享（同源下所有标签页）
数据类型：仅支持字符串
//设置数据
localStorage.setItem('user', JSON.stringify({ id: 1, name: 'John' }));
//读取数据
const user = JSON.parse(localStorage.getItem('user'));
// 删除数据
localStorage.removeItem('theme');
// 清空所有
localStorage.clear();
3.IndexedDB（索引数据库）
浏览器内置的NoSQL 数据库
支持大量结构化数据存储
存储位置：浏览器（磁盘）
生命周期：永久（除非手动清除）
容量：通常 50MB - 无限制（取决于浏览器和磁盘空间）
跨标签页：共享（同源）
数据类型：支持复杂对象（对象、数组、Blob、File 等）
API 特点：异步操作，基于事务

选择建议：
临时数据（单标签页） → SessionStorage
持久化简单数据 → LocalStorage
大量/复杂数据 → IndexedDB
敏感数据/份认证/权限控制 → HttpOnly Cookie (Refresh Token) + Memory (Access Token)
// 服务器设置 HttpOnly Cookie
// 前端内存存储 Access Token