用 localStorage 实现可持久化书签列表需序列化数组、校验并补全 URL、统一数据源实时过滤、绑定 ID 操作、监听 storage 事件同步多页状态。
用纯 HTML + localStorage 实现可持久化的书签列表
浏览器原生书签管理器不好搜、难分类、同步慢，但你不需要写后端或引入框架，就能做个轻量级本地书签页——核心就靠 localStorage 存数组，用 JSON.parse() 和 JSON.stringify() 读写，所有数据留在本机，关页面也不丢。
常见错误是直接把 localStorage.setItem('bookmarks', bookmarksArray)，结果存进去变成 "[object Object]" ——必须手动序列化。另外别用 document.write() 动态写入，它会清空整个页面，改用 innerHTML 或 appendChild() 增量更新。
- 书签数据结构建议用对象数组：
[{name: "GitHub", url: "https://github.com", tag: "dev"}] - 每次增删改后立刻调用
localStorage.setItem('bookmarks', JSON.stringify(bookmarks)) - 初始化时用
JSON.parse(localStorage.getItem('bookmarks') || '[]')防止null报错
添加书签时校验 URL 格式避免跳转失败
用户手输 github.com 而不是 https://github.com，点击就会跳到当前域名下路径（比如 http://localhost/github.com），这是前端最常见的跳转 bug。
解决方法不是强制加 https://，而是用 URL 构造函数做合法校验：能成功构造即为有效 URL；否则自动补前缀。注意不要用正则硬匹配，http://、https://、ftp://、甚至 chrome-extension:// 都是合法协议。
立即学习“前端免费学习笔记（深入）”；
- 校验代码：
try { new URL(inputValue); } catch (e) { inputValue = 'https://' + inputValue; } - 补全后还得再校验一次，防止
https://github.com/后多一个斜杠导致双斜杠（部分浏览器会静默修正，但不可依赖） - 输入框加
type="url"只有基础提示作用，不能替代 JS 校验
按标签过滤和关键词搜索要共用同一份数据源
很多人分开维护「全部列表」、「搜索结果」、「标签筛选结果」三个数组，结果改一个书签要同步三处，极易不一致。正确做法是只存一份原始数组 bookmarks，所有视图都基于它实时计算。
搜索和标签筛选本质都是 filter()，组合条件时用布尔逻辑连写，别嵌套 filter(filter(...))，性能差还难调试。比如同时满足「包含“git”且属于“dev”标签」，直接写：bookmarks.filter(b => b.name.includes(q) && b.tag === activeTag)。
- 搜索框
input事件里节流（如 300ms），避免每敲一个字都重渲染 - 标签列表用
data-tag="dev"存属性，点击时读取该属性值赋给activeTag变量 - 清空搜索或取消标签筛选时，
activeTag设为null，过滤条件自动退化为仅搜索
编辑和删除操作必须绑定到具体书签项，而非全局索引
用 for (let i = 0; i 循环生成按钮，然后在点击事件里用 <code>i 当索引去删数组——这几乎必错。因为 DOM 渲染顺序、过滤后的显示顺序、原始数组顺序三者早已不同步，点第 2 个按钮可能删掉第 5 个书签。
可靠方案是每个书签容器（如 <li>）上加唯一 data-id，值设为该书签的 id 字段（生成时用 Date.now() + Math.random() 即可）；所有操作都通过这个 id 查找并修改原始数组。
- 渲染时：
<li data-id="<code>${b.id}</code>">...</li> - 删除按钮事件处理器里：
const id = event.target.closest('li').dataset.id; bookmarks = bookmarks.filter(b => b.id !== id); - 编辑保存时也先用
id找到原对象，再改其name、url等字段，最后存回localStorage
真正麻烦的不是功能实现，而是当用户在多个标签页同时打开这个书签页时，localStorage 不触发跨页更新事件——得监听 storage 事件手动刷新，否则 A 页删了书签，B 页还显示着。这个细节九成教程会漏掉。
