HTML创建收藏分组教程

HTML本身无法创建真实的收藏分组或文件夹结构，它只是静态标记语言，不具备操作本地文件系统的能力；所谓“HTML实现收藏分组”，实则是借助JavaScript配合localStorage等前端存储机制，在浏览器中模拟分组逻辑——通过JSON序列化保存分组名称与作品链接的映射关系，并拦截链接点击事件动态增删数据，但该方案仅在HTTP(S)服务器环境下有效，本地双击打开（file://协议）将失效；若需生成真实目录结构或可下载ZIP包，则必须引入后端服务或桌面应用框架（如Electron/Tauri），突破浏览器沙箱限制。理解这一根本边界，才能避免被“纯HTML万能”的误导教程带偏方向。

HTML 本身不能创建真正的收藏分组或文件夹结构

HTML 是标记语言，不是文件系统，它没有能力在用户设备上新建文件夹、保存分组数据或持久化收藏状态。所谓“HTML 创建收藏分组”，实际是前端配合浏览器能力（如 localStorage、indexedDB）或后端接口模拟的交互效果，纯 HTML 文件（.html）双击打开时，连读写本地文件都不被允许。

用 localStorage 模拟收藏分组最轻量可行

适合单页静态作品集，不依赖服务器。核心逻辑是：把分组名和作品 ID（或 URL、标题等）存成对象数组，每次增删都重写 localStorage。

• 分组结构建议用 { groupName: "UI 设计", items: ["p1.html", "p2.html"] } 这类扁平格式，避免嵌套过深导致序列化/解析出错
• 必须用 JSON.stringify() 存、JSON.parse() 取，否则存进去的是 [object Object]
• 注意 localStorage 有容量限制（通常 5–10MB），但更常见的是单条 key 值超长触发 QuotaExceededError，建议每组 item 数控制在 200 条内
• 示例片段：

  const groups = JSON.parse(localStorage.getItem('artGroups') || '[]');<br>groups.push({ groupName: '速写', items: ['sketch-01.html'] });<br>localStorage.setItem('artGroups', JSON.stringify(groups));

点击链接自动归入分组？得靠 JS 拦截 + 自定义属性

HTML 的 默认跳转，无法直接触发分组逻辑。必须用 JavaScript 阻止默认行为，并提取自定义信息。

• 给链接加 data-group-id 或 data-work-id 属性，比如 春日草图
• 绑定点击事件时读取该属性，再调用你的分组添加函数，而不是靠 href 路径解析（路径可能带参数、重定向、大小写不一致）
• 别用 location.pathname 当作品唯一标识——本地双击打开时是 file:/// 协议，Chrome 会直接拒绝读取 localStorage；部署到 HTTP(S) 服务才生效

真要持久化文件夹结构，必须离开纯 HTML

如果目标是生成可下载的带目录的 ZIP、或在用户电脑里建真实文件夹（如 ./favorites/character/），那 HTML 无能为力。浏览器安全模型禁止网页脚本操作本地文件系统。

• 可行替代方案只有两个：
  — 后端服务（Node.js/Python）接收分组数据，生成 ZIP 并提供下载链接
  — 使用桌面应用框架（如 Tauri、Electron），用 HTML 做界面，但底层调用系统 API 写文件
• 有人用 <input type="file" webkitdirectory> 读取用户选中的整个文件夹，但这只能读，不能写，也不能创建新文件夹
• 所有“HTML 教程”里号称能“自定义文件夹”的，要么是伪代码，要么实际依赖外部工具打包，正文却没说清边界

真正卡住的地方从来不是怎么写 HTML 标签，而是没分清“页面展示”和“文件系统操作”根本不在一个层面。一旦需要跨出浏览器沙箱，就必须引入其他技术栈，而且得提前想好部署方式和用户运行环境。

今天关于《HTML创建收藏分组教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！