本文介绍使用 localstorage 实现跨页面的用户访问状态追踪，通过记录已访问页面数量，动态控制特定链接（如 graveyard.html）的显示与隐藏，无需后端支持，适合纯静态 html/css/js 项目。
本文介绍使用 localstorage 实现跨页面的用户访问状态追踪，通过记录已访问页面数量，动态控制特定链接（如 graveyard.html）的显示与隐藏，无需后端支持，适合纯静态 html/css/js 项目。
在构建基于超文本的交互式叙事网站（如您描述的小镇探索型小说）时，常需根据用户的浏览路径动态调整界面——例如：仅当用户已访问至少三个地点（sheriff.html、saloon.html 等）后，才显示隐藏地点 graveyard.html 的入口。这一需求无需服务器或复杂框架，利用浏览器原生的 localStorage 即可优雅实现。
✅ 实现原理简述
localStorage 是一种持久化客户端存储机制，数据在用户关闭浏览器后仍保留（除非手动清除），且同源下所有页面共享同一存储空间。我们将在每个地点页面中执行以下逻辑：
- 解析当前页面文件名（如 saloon.html）；
- 将其加入一个去重后的访问列表（存于 localStorage）；
- 若列表长度 ≥ 3，则显示 graveyard.html 链接；
- （可选）当用户进入 graveyard.html 后自动清空记录，实现“单次解锁”效果。
?️ 具体步骤
第一步：在 places.html 中添加受控链接
将 graveyard.html 链接初始设为隐藏，并赋予唯一 ID，便于 JavaScript 操作：
<!-- places.html 中适当位置 --> <a href="graveyard.html" id="graveyard-link" style="display: none;">→ The Graveyard</a>
第二步：在所有相关页面（含 places.html、各地点页及 graveyard.html）底部添加统一脚本
将以下代码置于
<script>
document.addEventListener("DOMContentLoaded", () => {
// 获取当前页面文件名（如 "sheriff.html"）
const currentPage = window.location.pathname.split('/').pop();
// 从 localStorage 读取访问列表，若无则初始化为空数组
let visited = JSON.parse(localStorage.getItem("visitedPages") || "[]");
// 避免重复记录同一页面（用户可能刷新当前页）
if (!visited.includes(currentPage)) {
visited.push(currentPage);
localStorage.setItem("visitedPages", JSON.stringify(visited));
}
// 显示 graveyard 链接（需至少访问 3 个不同地点）
const graveyardLink = document.getElementById("graveyard-link");
if (graveyardLink && visited.length >= 3) {
graveyardLink.style.display = "inline"; // 或 "block"，按需调整样式
}
// 【可选】进入 graveyard.html 后重置状态
if (currentPage === "graveyard.html") {
localStorage.setItem("visitedPages", JSON.stringify([]));
}
});
</script>
? 注意事项：
- 所有页面必须部署在同源环境（如全部位于 https://yoursite.com/ 下），否则 localStorage 不共享；
- 测试时请使用真实 HTTP 服务（如 http-server、VS Code Live Server），直接双击打开 HTML 文件（file:// 协议）会导致 localStorage 失效；
- 若需兼容更老浏览器（如 IE9），可改用 cookies + document.cookie，但代码更复杂且容量受限；
- 当前逻辑统计的是不同页面数量（自动去重），符合“访问至少三个地点”的语义；若需统计总访问次数（含重复），可移除 !visited.includes(...) 判断。
✅ 效果验证
- 用户首次访问 sheriff.html → visitedPages = ["sheriff.html"] → 链接隐藏；
- 接着访问 saloon.html 和 stables.html → 列表变为 ["sheriff.html","saloon.html","stables.html"] → 长度达 3，places.html 中的 Graveyard 链接立即可见；
- 用户点击进入 graveyard.html → 列表被清空，下次重新开始计数。
此方案轻量、可靠、零依赖，完美适配您的超文本小说项目——让叙事节奏真正由用户行为驱动。
