sessionstorage是轻量可靠的页面状态暂存方案，适合存非敏感临时数据如表单草稿、折叠状态、分页参数、筛选条件和滚动位置；需避免存储token等敏感信息，并通过封装工具统一处理序列化、异常及命名规范。
页面状态暂存用 sessionStorage 是轻量、可靠且开箱即用的选择——它自动随标签页生命周期存在，关闭即清空，天然契合“单次会话内状态保持”场景。
哪些状态适合存 sessionStorage？
适合暂存那些非敏感、临时性、页面级或表单级的状态数据，例如：
- 表单输入内容（如搜索关键词、未提交的编辑草稿）
- 折叠/展开状态（如侧边栏收起、详情区域开关）
- 分页参数（当前页码、每页条数）
- 筛选条件（日期范围、分类标签等用户主动设置的过滤项）
- 滚动位置（配合 scroll restoration 或手动 restore）
避免存储 token、用户身份信息、支付凭证等敏感内容——sessionStorage 不防 XSS，同源脚本可任意读写。
封装一个安全可用的状态管理工具
直接调用 sessionStorage.setItem 易出错（比如序列化失败、键名冲突、过期逻辑缺失）。推荐封装一层简单工具：
const PageState = {
set(key, data) {
try {
sessionStorage.setItem(key, JSON.stringify(data));
} catch (e) {
console.warn(`Failed to save state "${key}":`, e);
}
},
get(key, defaultValue = null) {
const item = sessionStorage.getItem(key);
if (!item) return defaultValue;
try {
return JSON.parse(item);
} catch (e) {
console.warn(`Failed to parse state "${key}":`, e);
return defaultValue;
}
},
remove(key) {
sessionStorage.removeItem(key);
},
clear() {
// 只清除本页相关 key，避免影响其他模块
Object.keys(sessionStorage)
.filter(k => k.startsWith('page_') || k.startsWith('form_'))
.forEach(k => sessionStorage.removeItem(k));
}
};
使用前约定 key 命名规则（如 form_userProfile_edit、page_productList_filter），便于维护和批量清理。
结合实际场景自动保存与恢复
典型做法是监听用户交互并节流保存，页面加载时主动恢复：
-
表单输入：对
<input>、<textarea></textarea>绑定input事件，用debounce(300)防抖后调用PageState.set() -
页面卸载前：监听
beforeunload补充一次保存，覆盖可能遗漏的操作 - 初始化恢复：在组件挂载或 DOM ready 后，读取对应 key 并还原表单值、UI 状态等
-
导航离开时清理：如用户提交成功或跳转到无关页面，显式调用
PageState.remove()避免脏状态残留
注意兼容性与边界情况
sessionStorage 在所有现代浏览器中均支持（包括 IE10+），但需留意：
- 隐私模式下部分浏览器会禁用或限制容量（通常仍可用，但可能抛异常）
- 存储上限约 5–10MB（因浏览器而异），单个 value 超过限制会触发
QuotaExceededError - 不同协议（http/https）、端口、子域名之间不共享，
https://a.example.com和https://b.example.com互不可见 - 页面通过
window.open()打开的新窗口，默认继承父窗口的 sessionStorage；但刷新或导航后新窗口会获得独立副本
上线前建议在目标环境中实测写入与读取流程，并加入 try-catch 和降级提示（如“暂存失败，刷新后将丢失当前输入”）。
