本文介绍使用 sessionStorage 解决跨页面状态丢失问题：当用户点击下拉菜单中的 项时，将其 rel 值保存至会话存储，并在目标页（如 index2.html）中可靠读取，避免因页面刷新或跳转导致变量重置。
本文介绍使用 sessionstorage 解决跨页面状态丢失问题：当用户点击下拉菜单中的 `
在单页应用不介入的前提下，传统 JavaScript 变量（如 let val = 1）的作用域仅限于当前页面执行上下文。一旦用户点击 跳转，浏览器加载全新页面，原 JS 执行环境被销毁，所有局部/全局变量（包括 val）均被重置——这正是您观察到“控制台中 val 已更新，但进入 index2.html 后又变回 1”的根本原因。
要实现同源页面间的状态延续，推荐使用 sessionStorage：它基于会话生命周期（关闭所有同源标签页后自动清除），支持跨页面读写，API 简洁且无需后端参与。
✅ 正确实现步骤
1. 在 index.html 中保存选择值
将点击事件中的赋值逻辑从变量赋值改为 sessionStorage 写入：
// 初始化（可选：确保有默认值）
sessionStorage.setItem('selectedCategory', '1');
// 绑定点击事件，保存 li 的 rel 值
$(".category").on("click", function(e) {
const relValue = $(this).attr("rel");
if (relValue) {
sessionStorage.setItem("selectedCategory", relValue);
}
});? 提示：使用 .on("click", ...) 替代已弃用的 .click() 更符合现代 jQuery 最佳实践；同时增加 rel 属性存在性校验，提升健壮性。
2. 在 index2.html 中读取并使用该值
在 index2.html 的脚本中（建议置于 DOM 加载完成后执行）：
$(document).ready(function() {
const savedVal = sessionStorage.getItem("selectedCategory");
console.log("上一页选中的分类 ID：", savedVal); // 如 "3"、"4" 或 "5"
// ✅ 可立即用于业务逻辑，例如：
// - 动态加载对应内容
// - 高亮导航项
// - 发送分析埋点
if (savedVal) {
// 示例：向服务端提交选择记录
// fetch('/api/log-selection', { method: 'POST', body: JSON.stringify({ category: savedVal }) });
}
});⚠️ 注意事项与最佳实践
- 作用域限制：sessionStorage 仅在同源（协议 + 域名 + 端口） 页面间共享。http://example.com 与 https://example.com 视为不同源，无法互通。
- 数据类型：sessionStorage 只接受字符串值。若需存对象/数组，请先 JSON.stringify()，读取时再 JSON.parse()。
-
隐私模式兼容性：部分浏览器在隐私/无痕窗口中可能禁用 sessionStorage，建议添加 try-catch 容错：
try { sessionStorage.setItem("selectedCategory", relValue); } catch (e) { console.warn("sessionStorage 不可用，降级处理：", e); // 可选：改用 URL 参数传递（见下方补充） } -
替代方案参考（URL 参数传递）：
若需更强的可追溯性或兼容极旧环境，可在跳转链接中动态注入参数：$(".category").on("click", function(e) { const relValue = $(this).attr("rel"); const $link = $(this).find("a"); const url = new URL($link.attr("href")); url.searchParams.set("category", relValue); $link.attr("href", url.toString()); });然后在 index2.html 中用 new URLSearchParams(window.location.search).get("category") 读取。
✅ 总结
sessionStorage 是解决前端跨页面轻量状态共享的标准化、高性能方案。相比 Cookie（需 HTTP 头、有大小限制）、localStorage（长期留存不适用会话场景）或 URL 参数（暴露敏感信息、长度受限），它在用户体验与工程实践间取得了理想平衡。只要确保操作发生在同源环境，即可稳定实现“所选即所得”的连贯交互体验。
