用localStorage实现翻译词汇收藏夹，以数组存储含原文、译文、时间戳的对象，支持增删查、去重、刷新持久化及提示反馈。
用 localStorage 实现网页翻译工具的常用词汇收藏夹，核心是把用户点击收藏的词对（如“hello→你好”）以结构化方式存进浏览器本地，刷新不丢失，且能增删查。
一、设计存储结构：用数组存词对对象
推荐用数组保存多个词汇条目，每个条目是包含原文、译文、时间戳的对象。这样便于遍历渲染，也方便后续扩展（比如加分类、标签）：
-
例如：
[{"source":"hello","target":"你好","time":1715823400000},{"source":"world","target":"世界","time":1715823405000}] - 存前先用
JSON.stringify()转字符串；读取后用JSON.parse()还原为数组 - 首次访问时若无数据，初始化为空数组，避免
parse(null)报错
二、添加词汇：一键收藏 + 去重逻辑
点击“收藏”按钮时，先检查是否已存在相同原文（或相同原文+译文组合），避免重复收录：
- 遍历现有收藏数组，用
some()判断是否存在item.source === newWord.source && item.target === newWord.target - 若未重复，则用
unshift()插入开头（保持最新在前），再存回localStorage - 示例代码片段：
const list = JSON.parse(localStorage.getItem('favWords') || '[]');<br> if (!list.some(w => w.source === src && w.target === tgt)) {<br> list.unshift({ source: src, target: tgt, time: Date.now() });<br> localStorage.setItem('favWords', JSON.stringify(list));<br> }
三、展示与管理：DOM 渲染 + 删除功能
页面加载后读取并动态生成列表；每项右侧放“删除”按钮，点击后从数组中过滤掉该条目并更新存储：
- 用
forEach或map遍历数组，拼接字符串或直接创建元素插入容器 - 删除按钮绑定事件，传入当前索引或唯一标识（如时间戳），调用
filter()生成新数组再保存 - 建议加简单样式区分中英文，比如原文灰色、译文加粗，提升可读性
四、增强体验的小细节
让收藏夹更实用、不易出错：
- 收藏成功后给个轻量提示（如 tooltip 或短暂 toast），避免用户误点无反馈
- 输入框为空或只有空格时禁止收藏，前端校验提前拦截
- 考虑大小写与空格归一化（如
trim().toLowerCase()）做宽松去重，但显示仍保留原始格式 - 如需支持导出，可提供“复制为 JSON”按钮，方便用户备份
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
