本文讲解如何利用 sessionstorage 在用户点击下拉菜单项并跳转到新页面后，依然保留所选 <li> 元素的 rel 值，解决因页面刷新导致 javascript 变量重置的问题。
本文讲解如何利用 sessionstorage 在用户点击下拉菜单项并跳转到新页面后，依然保留所选 <li> 元素的 rel 值，解决因页面刷新导致 javascript 变量重置的问题。
在 Web 开发中，常遇到这样的场景：用户在当前页（如 index.html）通过点击 <li> 触发逻辑，将某个标识（如 rel="3"）存入变量，随后跳转至新页面（如 index2.html）。此时若直接使用普通 JS 变量（如 let val = 1），该值仅存在于当前页面的执行上下文中——一旦页面跳转或刷新，变量即被销毁，新页面中无法访问原值。
根本原因在于：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 重置问题，还能构建出状态连贯、用户体验一致的多页交互流程。
