localstorage缓存最近浏览记录需存url和标题数组，控制数量、去重、自动更新；读取时解析json并渲染，注意同源限制、编码处理、隐私过滤及可选手动过期机制。

网页端用 localStorage 缓存用户最近浏览的历史记录，核心是把页面 URL、标题或自定义标识存成数组，控制数量、去重、自动更新，并在需要时读取渲染。它不依赖后端，刷新不丢，适合轻量级“最近访问”功能。

怎么保存浏览记录

每次用户打开一个新页面（或点击某个关键链接），触发记录逻辑：

• 从 localStorage 读取已有记录，比如键名为 recentViews；若无，则初始化为空数组
• 构造一条记录对象，至少包含 url 和 title（可选 timestamp）
• 检查该 url 是否已存在，存在则先移除原项（保证最新访问排最前）
• 用 unshift() 插入到数组开头
• 用 splice(10) 截取前 10 条，保持上限
• 调用 localStorage.setItem('recentViews', JSON.stringify(arr)) 写入

怎么读取并展示历史记录

在侧边栏、下拉菜单或独立页面中动态生成最近浏览列表：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 用 localStorage.getItem('recentViews') 获取字符串
• 用 JSON.parse() 转回数组，加 try-catch 防止解析失败（如数据被手动篡改）
• 遍历数组，生成 或 元素，显示标题、截断 URL，点击跳转对应页面
• 可添加“清空”按钮，执行 localStorage.removeItem('recentViews')

要注意的关键细节

看似简单，但几个点容易出错：

• 同源限制：a.com 的记录，b.com 或 http://a.com 都读不到，协议、域名、端口必须完全一致
• 中文与特殊字符：URL 中含中文或参数时建议用 encodeURI() 存、decodeURI() 取，避免解析异常
• 隐私边界：不要缓存含 token、用户 ID、手机号等敏感路径，例如 /user/12345?token=xxx 应过滤或脱敏
• 容量安全：单条记录几十字节，10 条远低于 5MB 上限，但避免存完整 HTML 或长描述

要不要加过期机制

localStorage 本身不支持自动过期，但可以手动实现：

• 每条记录额外存一个 expires 时间戳（如 Date.now() + 7 * 24 * 60 * 60 * 1000）
• 读取时过滤掉 Date.now() > expires 的项，再重新写入
• 如果只是“最近访问”，通常不需要过期；若用于临时状态（如草稿），建议加