如何在页面跳转后持久化保存用户点击的列表项值

本文介绍如何利用 sessionstorage 解决单页操作状态无法跨页面保留的问题，通过将 li 元素的 rel 值持久化存储，实现在跳转到 index2.html 后仍能准确读取用户此前选择的分类标识。

本文介绍如何利用 sessionstorage 解决单页操作状态无法跨页面保留的问题，通过将 li 元素的 rel 值持久化存储，实现在跳转到 index2.html 后仍能准确读取用户此前选择的分类标识。

在 Web 开发中，一个常见误区是认为 JavaScript 变量（如 let val = 1）能在页面跳转后继续存在。实际上，每次导航到新页面（如 /index2.html）都会触发全新的文档加载和 js 执行环境，所有内存变量均被重置——这正是 val 总是回退为初始值 1 的根本原因。

要实现跨页面的状态共享，必须借助浏览器提供的客户端存储机制。其中，sessionStorage 是最契合本场景的方案：它作用域限定于当前浏览器标签页，数据在标签页关闭前始终有效，且支持同源页面间无缝读写，无需服务端参与，安全、轻量、易用。

✅ 正确实现步骤

1. 初始化并持久化存储值
将初始值写入 sessionStorage，而非仅声明局部变量：

// 初始化：确保首次访问时也有默认值 sessionStorage.setItem('selectedCategory', '1');  $(".category").click(function() {   const relValue = $(this).attr('rel');   sessionStorage.setItem('selectedCategory', relValue); });

2. 在目标页（如 index2.html）中读取该值
在 index2.html 的 <script> 中直接获取：</script>

// index2.html 中获取用户之前选择的分类 ID const selectedId = sessionStorage.getItem('selectedCategory'); console.log('用户选择的分类 ID：', selectedId); // 例如输出 "3"、"4" 或 "5"  // 可进一步用于动态加载内容、高亮导航、或发送至后端 if (selectedId) {   // 示例：根据 ID 请求对应数据   fetch(`/api/category/${selectedId}`)     .then(res => res.json())     .then(data => renderSection(data)); }

⚠️ 注意事项与最佳实践

• 同源限制：sessionStorage 仅在同协议、同域名、同端口下共享。确保 index.html 和 index2.html 部署在同一源（如均为 https://example.com/），否则读取将返回 NULL。
• 类型安全：sessionStorage 只接受字符串值。若需存储对象，请配合 JSON.stringify() / JSON.parse() 使用；对于数字 ID，建议显式转换：

  const categoryId = parseInt(sessionStorage.getItem('selectedCategory'), 10) || 1;

• 清理时机：如需在用户完成流程后清除状态，可调用 sessionStorage.removeItem(‘selectedCategory’) 或 sessionStorage.clear()。
• 降级方案（可选）：若需支持更长生命周期（如关闭标签页后仍保留），可改用 localStorage；但注意其无自动过期机制，需自行管理。

✅ 总结

使用 sessionStorage 替代普通变量，是解决“页面跳转后状态丢失”问题的标准、可靠且符合现代 Web 规范的做法。它无需额外依赖，兼容性良好（IE10+），且语义清晰——明确表达了“本次会话内有效”的业务意图。只需两行核心代码（setItem + getItem），即可让用户的交互意图跨越页面边界，为构建连贯的多页用户体验奠定基础。