localstorage可持久化保存二维码历史记录，需将结构化对象（含id、content、type、timestamp等字段）转为json字符串存入，并在页面加载时解析渲染为倒序列表，支持点击复用、单条删除及自动裁剪至50条，注意容量限制与敏感信息规避。
可以通过 localStorage 将用户每次生成的二维码内容（如 URL、文本、配置参数）以结构化方式保存，后续在页面加载时读取并渲染为历史记录列表，实现本地持久化的“历史查询”功能。关键在于合理设计数据格式、统一存取逻辑，并做好异常处理。
保存二维码生成记录
每次成功生成二维码后，把必要信息整理成对象，推入一个数组，再存入 localStorage：
- 推荐字段包括：
id（时间戳或自增序号）、content（原始输入）、type（如 'url'/'text'）、timestamp（生成时间）、size（可选，如 200）、format（如 'png'） - 用
JSON.stringify()转为字符串再保存，避免直接存对象导致序列化失败 - 示例代码：
const history = JSON.parse(localStorage.getItem('qrcodeHistory') || '[]');
const newItem = { id: Date.now(), content: inputVal, type: 'url', timestamp: new Date().toISOString() };
history.push(newItem);
localStorage.setItem('qrcodeHistory', JSON.stringify(history));
加载并展示历史记录
页面初始化时从 localStorage 读取历史数据，渲染为可点击/预览的列表：
- 用
JSON.parse()还原数组，注意捕获解析异常（如用户手动篡改了 storage 内容） - 建议按
timestamp倒序排列，最新记录在前；可用Array.sort()实现 - 每条记录可显示缩略内容（如截取前 20 字符）、时间和操作按钮（重新生成 / 删除）
- 点击某条记录时，可自动填充表单并触发生成，实现“一键复用”
支持删除与清理
提供对单条或全部历史的管理能力，提升用户体验和存储可控性：
- 单条删除：通过
filter()移除指定id的项，再写回localStorage - 清空全部：直接调用
localStorage.removeItem('qrcodeHistory')或设为空数组 - 可添加“最多保留 50 条”的自动裁剪逻辑，在每次新增前检查长度并
splice(0, history.length - 50)
兼容性与注意事项
localStorage 在所有现代浏览器中都支持，但需注意实际使用边界：
- 容量限制约 5–10MB（因浏览器而异），单条记录建议控制在几 KB 内，避免存 Base64 图片等大字段
- 数据仅存在当前域名+协议+端口下，跨子域不共享；隐私模式下可能被禁用，需加
try...catch容错 - 敏感信息（如含 token 的 URL）不应明文存入，若需安全存储应结合加密或仅存哈希标识
- 不要依赖
localStorage做唯一数据源——它可被用户随时清除，历史功能定位是“便利辅助”，非核心数据备份
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
