LocalStorage 可用于持久化保存用户浏览足迹，如商品ID、文章URL等；需按步骤记录单次行为、避免重复、安全读取渲染，并做好容量管理。
LocalStorage 可以用来持久化保存用户在网页上的浏览足迹，比如最近查看过的商品 ID、文章 URL 或页面路径。它简单易用，数据在浏览器关闭后依然存在，适合记录非敏感、轻量级的历史行为。
1. 记录单次浏览行为
每次用户访问一个新页面或点击某个内容时，可以将关键信息（如 URL、ID、时间戳）存入 LocalStorage。推荐用数组形式存储，方便后续读取和去重：
- 先从 LocalStorage 读取已有的足迹列表（JSON 字符串），解析成数组
- 添加当前足迹对象（例如
{ id: "123", url: "/product/123", timestamp: Date.now() }） - 控制数组长度（如只保留最近 20 条），避免无限增长
- 用
JSON.stringify()存回 LocalStorage
2. 避免重复记录同一页面
用户可能多次访问同一页面，但通常只需记录一次。可以在插入前检查是否已存在相同标识（如 id 或 url）：
- 遍历现有足迹数组，用
some()判断是否存在相同id - 如果已存在，可选择跳过，或更新其
timestamp表示“再次访问” - 注意：URL 中的查询参数（如
?ref=abc）可能影响判断，建议标准化处理（如去掉参数或只取 pathname）
3. 读取并渲染历史足迹
在“最近浏览”模块中，从 LocalStorage 获取数据后，需做基本校验再使用：
立即学习“Java免费学习笔记（深入）”；
- 用
try...catch包裹JSON.parse()，防止数据损坏导致脚本中断 - 检查解析结果是否为数组，且每项有必需字段（如
id和url） - 按
timestamp降序排列，确保最新访问排在前面 - 渲染时注意 XSS 风险：若显示 URL 或标题，用
textContent而非innerHTML
4. 清理与容量管理
LocalStorage 容量通常为 5–10MB，但单个域名下所有数据共享该限额。长期积累足迹可能挤占空间：
- 定期精简：每次写入时限制最大条数（如
footprints.slice(-20)） - 提供手动清除入口，调用
localStorage.removeItem("browseHistory")或清空整个键 - 不依赖 LocalStorage 存储大字段（如完整 HTML 或图片 Base64），只存必要标识和元数据
不复杂但容易忽略细节，比如数据格式校验、重复判断和容量控制。只要保持结构清晰、写入节制、读取安全，LocalStorage 就能稳定支撑浏览足迹功能。
