如何使用JavaScript在HTML文件自身存储数据实现离线持久化

该需求完全可实现，不需要依赖网络、浏览器存储、服务器/数据库，核心思路是让页面把用户填写的数据直接嵌入HTML文件自身源码，文件传输到任意PC打开时都能直接读取内嵌数据完成回填，数据和文件本身绑定，不会因为刷新、换设备丢失。

整个逻辑全部写在单HTML内部，无外部依赖，离线环境可正常运行，实现步骤如下：

• 给所有需要保存的表单输入元素（输入框、下拉选择、复选框等）统一添加data-persist自定义属性，作为批量抓取数据的标记
• 在HTML源码中预留固定的数据存储节点，用MIME类型为application/json的script标签承载，避免标签内的JSON数据被浏览器解析执行：

  <script id="persist-data" type="application/json">{}</script>
  

• 编写页面初始化逻辑：页面加载完成后，立刻读取#persist-data节点内的JSON内容，解析后按字段标识挨个回填到对应的表单元素中，实现打开文件即展示之前填写的内容
• 新增醒目的「保存更新文件」按钮，绑定点击触发的保存逻辑：
  1. 遍历所有带data-persist标记的表单元素，收集当前所有输入值，序列化成标准JSON字符串
  2. 获取当前页面的完整HTML源码，将源码中#persist-data标签包裹的旧JSON内容替换为新生成的JSON字符串
  3. 将替换完成的完整HTML内容转为Blob对象，触发浏览器下载，生成内嵌了最新数据的新HTML文件
• 用户后续只需要用下载得到的新HTML文件替换旧文件，再拷贝传输给其他用户即可，任何PC离线打开该文件，之前填写的所有数据都能正常加载。

注意：该方案仅需要用户在填写完成后点击一次保存按钮，替换原文件即可，不需要安装任何插件、软件，兼容所有主流现代浏览器。

• 增加页面离开监听：如果检测到用户修改了表单内容但未点击保存触发文件更新，在用户关闭/刷新页面前弹出提示，提醒先保存最新数据
• 给下载的新文件自动添加填写日期、填写人标识后缀，避免多版本传输时混淆新旧文件
• 可以在表单旁加固定的操作提示栏，明确告知用户填写完成后必须点保存按钮生成新文件，不要直接在原文件上关闭。

如果觉得手动替换文件的操作稍显繁琐，可以根据使用场景选择以下方案：

• 文件名编码方案：适合字段少、数据量小的场景，填写完成后JS将表单数据做短编码拼接在HTML文件名上，页面打开时自动读取当前文件名的编码串解析回填数据，缺点是数据量稍大就会导致文件名过长触发系统限制，不适合多字段的表格表单场景
• 配套免安装单文件程序：将HTML文件和对应系统的免安装单文件读写程序（可通过Python、Electron打包为单文件，不需要安装）放在同一个压缩包传输，程序启动后直接加载同目录下的HTML表单，用户填写完成后点保存直接修改同目录下的HTML文件内容，不需要手动下载替换，操作体验和本地Office文档一致，缺点是跨系统使用时需要准备对应Windows/Mac/Linux版本的程序包。

内容的提问来源于stack exchange，提问作者MTAS