本文介绍如何利用 sessionstorage 解决单页交互数据无法跨页面保留的问题，通过将 <li> 元素的 rel 值持久化存储，确保用户点击跳转后在目标页面仍能准确读取之前的选择。
本文介绍如何利用 sessionstorage 解决单页交互数据无法跨页面保留的问题，通过将 <li> 元素的 rel 值持久化存储，确保用户点击跳转后在目标页面仍能准确读取之前的选择。
在 Web 开发中，一个常见误区是认为 JavaScript 变量（如 let val = 1）能在页面跳转后继续存在。实际上，每次导航到新页面（例如从 index.html 跳转至 index2.html），浏览器会完全卸载当前执行环境——所有局部变量、闭包状态和内存中的值均被销毁，新页面运行的是全新的 JS 上下文。因此，尽管你在 index.html 中通过点击动态更新了 val，该值不会自动“跟随”用户进入 index2.html。
要实现跨页面的状态传递，必须借助浏览器提供的客户端存储机制。其中，sessionStorage 是最契合本场景的方案：它为同一浏览器标签页（tab）内的所有同源页面提供共享的数据空间，数据在标签页关闭前始终有效，且不随请求发送至服务器，安全性与实用性兼备。
✅ 正确实现方式
首先，在初始状态中使用 sessionStorage.setItem() 设置默认值（替代原始的 val = 1）：
// 初始化：设置默认选中值（可选，避免首次读取为 null）
sessionStorage.setItem('selectedCategory', '1');
// 绑定点击事件，持久化保存用户选择
$(".category").on("click", function() {
const relValue = $(this).attr("rel");
if (relValue !== undefined) {
sessionStorage.setItem("selectedCategory", relValue);
}
});然后，在 index2.html 的任意位置（例如 DOM 加载完成后），通过 sessionStorage.getItem() 获取该值：
$(document).ready(function() {
const savedVal = sessionStorage.getItem("selectedCategory");
console.log("上一页选中的分类 ID：", savedVal); // 如 "3"、"4" 或 "5"
// ✅ 可在此基础上执行后续逻辑，例如：
// - 动态加载对应内容
// - 高亮导航项
// - 发送埋点统计
});⚠️ 注意事项与最佳实践
- 键名唯一性：确保 sessionStorage 中使用的键（如 "selectedCategory"）在整个应用中不冲突；
- 类型安全：sessionStorage 只支持字符串值，若需存储对象，请配合 JSON.stringify() / JSON.parse() 使用；
- 作用域限制：sessionStorage 仅对同源（协议 + 域名 + 端口）且同标签页的页面生效；新开标签页或跨域访问将无法读取；
- 清理时机：无需手动清除——当用户关闭该标签页时，数据自动销毁；如需提前清理，调用 sessionStorage.removeItem("selectedCategory") 或 sessionStorage.clear()；
- 兼容性：现代浏览器全面支持（IE8+），无需 polyfill；
-
替代方案对比：
- localStorage：数据长期保留，适合需要跨会话记忆的场景（如用户主题偏好），但不符合“一次会话内有效”的语义；
- URL 参数（如 ?category=3）：更透明、可书签化，但需修改 <a href> 动态拼接，且对 SEO 和可维护性有影响；
- Cookie：体积小、可服务端读取，但存在安全与性能开销，不推荐用于纯前端状态同步。
综上，sessionStorage 是解决此类“页面间轻量状态传递”问题的标准、简洁且健壮的方案。只需将变量赋值/读取操作替换为 setItem/getItem 调用，即可让用户的选择真正“记住”并延续至下一个页面。
