如何在页面跳转后持久化存储 DOM 元素的属性值

在 Web 开发中，常遇到这样的场景：用户在当前页（如 index.html）通过点击

根本原因在于：JavaScript 变量不具备跨页面生命周期。要实现“一次设置、多页可用”，必须借助浏览器提供的客户端存储机制。sessionStorage 是最契合本场景的方案：它以键值对形式保存数据，作用域限定于当前浏览器标签页，且在页面跳转、刷新甚至前进/后退时均保持有效，关闭标签页后自动清除，兼顾安全性与实用性。

✅ 正确实现方式

首先，在初始页面（index.html）中，将点击事件中的 rel 值写入 sessionStorage：

// 初始化（可选，确保有默认值） sessionStorage.setItem('selectedCategory', '1');  // 绑定点击事件 $(".category").on("click", function(e) {   const relValue = $(this).attr("rel");   sessionStorage.setItem("selectedCategory", relValue);   // 注意：此处不阻止默认行为，允许 href 正常跳转 });

然后，在目标页面（index2.html）中读取该值：

// 页面加载完成后获取存储的值 $(document).ready(function() {   const savedVal = sessionStorage.getItem("selectedCategory");   if (savedVal !== null) {     console.log("上一页选中的分类 ID：", savedVal); // 如 "3"     // 可据此动态渲染内容、高亮导航、发起 API 请求等   } else {     console.log("未检测到选中分类，使用默认值");   } });

⚠️ 注意事项

• 键名一致性：确保 setItem() 和 getItem() 使用完全相同的键名（如 “selectedCategory”），区分大小写；
• 数据类型：sessionStorage 只支持字符串值。若需存储对象或数组，请先用 json.stringify() 序列化，读取时用 JSON.parse() 还原；
• 作用域限制：sessionStorage 仅在同源（协议 + 域名 + 端口）且同一标签页内共享。跨标签页或跨域不可见；
• 兼容性：现代浏览器（chrome 5+、firefox 2+、safari 4+、edge、IE10+）均支持，无需 polyfill；
• 替代方案对比：
  • localStorage：持久化存储（关闭浏览器也不清除），适合需长期保留的数据，但可能带来隐私或过期风险；
  • URL 参数（如 ?category=3）：更透明、可书签化，但需手动解析且暴露在地址栏中；
  • postMessage：适用于 iframe 或弹窗通信，不适用于常规页面跳转。

✅ 最佳实践建议

为提升代码健壮性，推荐封装读写操作：

const CategoryStorage = {   set(id) {     if (typeof id === "string" || typeof id === "number") {       sessionStorage.setItem("selectedCategory", String(id));     }   },   get() {     return sessionStorage.getItem("selectedCategory") || "1";   },   clear() {     sessionStorage.removeItem("selectedCategory");   } };  // 使用示例 $(".category").on("click", function() {   CategoryStorage.set($(this).attr("rel")); });

通过合理使用 sessionStorage，你不仅能解决 val 重置问题，还能构建出状态连贯、用户体验一致的多页交互流程。