纯前端数据持久化应按需选择方案：localstorage适合自动保存轻量状态（如表单输入），需字符串化/解析并校验；file api适合用户主动导入导出文件（如.html、.json），全程离线但需兼容性检查与错误处理。
纯前端实现数据持久化，关键不是“能不能存”，而是“存什么、怎么取、是否可靠”。HTML5 提供的 File API 和 Web Storage 是两类互补方案：File API 用于用户主动导入/导出文件（如 .html、.json），Web Storage（localStorage）用于自动记忆页面状态（如表单输入、编辑内容）。两者都不依赖服务器，但用途和限制完全不同。
用 localStorage 自动保存页面状态
适合保存轻量、结构简单、需随页面加载自动恢复的数据，比如输入框内容、开关状态、草稿文本。
- 只支持字符串——数字要 toString()，对象必须 JSON.stringify() 后再存；读取时对应用 parseInt() 或 JSON.parse()，且务必加 try/catch 防解析失败
- 判断是否存在不能用 if (getItem('key'))，因为 "0"、"false" 是真值，正确写法是 getItem('key') !== null
- 写入后建议验证：设完立刻读一次比对，避免隐私模式或存储满导致静默失败
- 示例：表单输入实时保存
document.getElementById('title').addEventListener('input', e => {
localStorage.setItem('draft-title', e.target.value);
});
window.addEventListener('DOMContentLoaded', () => {
const saved = localStorage.getItem('draft-title');
if (saved !== null) document.getElementById('title').value = saved;
});
用 File API 实现用户可控的文件导入导出
适合让用户主动选择保存位置（如导出为 .html 文件）、或从本地重新载入之前编辑的内容。整个过程不经过服务器，完全在浏览器内完成。
- 导出：构造 Blob 对象 + 创建临时 URL + 触发下载链接，支持任意文本格式（HTML、JSON、Markdown）
- 导入：通过 或拖放获取 FileList，用 FileReader 读取内容后注入 DOM
- 注意检查浏览器支持：window.File、window.FileReader、window.Blob 都存在才可用
- 读取失败常见原因：用户取消选择、文件过大（可设上限）、编码不匹配（推荐统一用 UTF-8）
什么时候该选哪个？
看数据归属和使用方式：
- 用户希望“下次打开网页还能看到上次写的字” → 用 localStorage，自动、无声、无需操作
- 用户希望“把当前编辑的页面另存为一个 .html 文件发给别人” → 用 File API 导出
- 用户希望“打开自己昨天存的 .html 草稿继续编辑” → 用 File API 导入
- 需要存大量结构化数据（如带图片的富文本、多版本历史）→ 应升级到 IndexedDB，它支持事务、索引和二进制存储，但复杂度明显上升
安全与兜底不能省
本地存储不是保险箱：
- localStorage 可被用户手动清空、禁用，或在无痕模式下失效，关键逻辑别只依赖它
- 用 File API 读取 HTML 内容后直接写入 innerHTML 有 XSS 风险，必须先净化（如用 DOMPurify）再渲染
- 所有 JSON 解析、Blob 构造、FileReader 读取都应包裹错误处理，避免因异常中断整个流程
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
