localstorage是浏览器端持久化存储机制，适合客户端行为记录与状态管理；支持访问计数、链接点击标记、布局排序、折叠状态及阅读进度等结构化数据保存，但需注意私密模式异常、容量限制与安全风险。
localStorage 是浏览器提供的持久化本地存储机制，适合在不依赖服务器的前提下，记录用户行为与页面访问数据。它不随 HTTP 请求发送，容量大（通常 5–10MB），且关闭浏览器后仍保留，非常适合轻量级、客户端侧的统计与状态管理。
记录单页访问次数
每次页面加载时读取并递增计数器，是最基础也最常用的用法：
- 使用唯一键名（如 pagecount）避免与其他数据冲突
- 首次访问时初始化为 1，后续每次刷新都 Number(localStorage.pagecount) + 1
- 建议配合 DOM 元素显示，例如：
document.getElementById('counter').textContent = localStorage.pagecount - 注意：该统计是按浏览器+域名维度，换设备或清除缓存即重置
标记已点击链接并动态样式区分
现代浏览器禁用 JS 读取 :visited 状态，因此需主动记录：
- 为所有目标链接绑定 click 事件，点击时将 href 值存入数组再序列化写入 localStorage
- 页面加载后读取该数组，遍历所有链接，匹配 href 并添加 .visited 类
- CSS 中定义
.visited { color: #666; text-decoration: line-through; }实现视觉反馈 - 可扩展支持“未点击高亮”逻辑，比如自动聚焦第一个未访问链接
保存用户交互状态（如首页布局、阅读进度）
不只是数字计数，localStorage 更擅长保存结构化行为快照：
- 首页模块排序：用 order 数组 存 ID 列表（
["news", "weather", "shortcut"]），加载时重排 DOM - 折叠/展开状态：用对象映射布尔值（
{"news": true, "weather": false}），还原时切换 .collapsed 类 - 阅读进度：以当前 URL 为 key，存
{ percent: 73.2, timestamp: 1715623400 }，滚动时节流写入，加载后尝试 scrollIntoView 或按百分比估算位置
注意事项与边界处理
实际使用中容易忽略但影响稳定性的细节：
- try…catch 包裹读写操作——私密模式下可能抛出 QuotaExceededError 或 SecurityError
- 写入前校验数据长度，避免超限；JSON 序列化前确认对象可安全序列化（不含函数、undefined）
- 单页应用（SPA）需监听路由变化，在跳转前主动保存，否则最后操作可能丢失
- 不要用于敏感信息（如 token、密码），localStorage 不具备安全性保障
