如何在页面跳转后持久化保存用户选择的下拉菜单值

在 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）：更透明、可书签化，但需修改 动态拼接，且对 SEO 和可维护性有影响；
  • cookie：体积小、可服务端读取，但存在安全与性能开销，不推荐用于纯前端状态同步。

综上，sessionStorage 是解决此类“页面间轻量状态传递”问题的标准、简洁且健壮的方案。只需将变量赋值/读取操作替换为 setItem/getItem 调用，即可让用户的选择真正“记住”并延续至下一个页面。