html5 file api 通过 filereader 读取用户选择的文件内容，再由开发者手动存入 localstorage（需 json 序列化）、indexeddb（支持 arraybuffer）或触发 blob 下载；所有操作均需用户交互，且须处理兼容性与错误边界。
HTML5 文件 API 本身不直接“转换”本地文件为 Web 存储（如 localStorage），但它提供了关键桥梁：把用户授权选择的文件内容读取出来，再由开发者决定是否序列化存入 localStorage、sessionStorage 或 IndexedDB。这种“无缝”不是自动发生的，而是靠合理组合 File、FileReader 和存储 API 实现的。
读取文件内容并存入 localStorage
这是最常见也最实用的路径。适用于文本类文件（如 .txt、.json、.csv）或结构化数据导出/导入场景。
- 用 让用户选择文件，触发 change 事件获取
File对象 - 创建
FileReader实例，调用readAsText()读取内容（支持指定编码，如 UTF-8） - 在
reader.onload回调中拿到e.target.result（字符串），用localStorage.setItem(key, value)保存 - 注意：localStorage 只接受字符串，若需存对象，先用
JSON.stringify()；读取时用JSON.parse()还原
从 Web 存储还原为可下载的 Blob 文件
当用户想把存在 localStorage 里的内容“另存为”本地文件时，需要反向操作：把字符串转回二进制数据块，再触发下载。
- 从
localStorage.getItem(key)获取原始字符串 - 用
new Blob([content], {type: 'text/plain;charset=utf-8'})构造 Blob（type 可按需设为 'application/json' 等） - 用
URL.createObjectURL(blob)创建临时 URL - 动态创建
<a></a>标签，设置href和download属性，再调用.click()触发下载 - 下载完成后建议调用
URL.revokeObjectURL(url)释放内存
大文件或二进制内容更适合 IndexedDB
localStorage 有容量限制（通常 5–10MB），且存取都是同步阻塞操作。对图片、音频、PDF 或较大 JSON，推荐用 IndexedDB。
- FileReader 的
readAsArrayBuffer()可将任意文件读为ArrayBuffer - IndexedDB 原生支持存储
ArrayBuffer、Blob和File对象，无需转字符串 - 存入时使用事务写入 object store；读取后可直接构造 Blob 用于预览或下载
- 相比 localStorage，它支持异步、分片读写、索引查询，更适合持久化管理用户文件
安全与兼容性提醒
所有操作都建立在用户主动交互基础上，浏览器不会允许网页随意访问本地路径。
- File API 已在所有现代浏览器中稳定支持（Chrome 13+、Firefox 4+、Safari 6+、Edge 12+）
- localStorage/sessionStorage 同样广泛支持，但注意 Safari 在无痕模式下可能禁用
- 不要尝试用 FileSystem API（已废弃）或旧版 requestFileSystem——它已被 Native File System API（showSaveFilePicker 等）取代，且仅限 HTTPS + 现代 Chromium/Edge
- 始终做错误判断：检查
event.target.files.length、reader.error、存储配额不足等边界情况
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
