如何在PWA中实现本地永久数据存储 无需部署后端服务与数据库

可以实现完全基于前端的本地持久化存储，不需要部署后端服务或数据库，且数据不会被常规的浏览器缓存清理操作删除，符合你的跨端PWA开发需求。

推荐可行方案 #

方案1：Origin Private File System（OPFS，首选） #

OPFS是W3C标准化的私有源站文件系统API，属于浏览器给每个站点分配的独立沙箱存储区域，完全脱离常规缓存目录，仅在用户主动删除站点全部数据或卸载PWA时才会被清除，Android全版本主流浏览器、iOS 15.4+以上版本均原生支持，非常适合存储你的配方、配料表格数据。
你可以将表格数据转成JSON、CSV等文本格式直接写入OPFS的文件中，使用示例代码如下：

// 存储数据到OPFS
async function saveRecipeData(data) {
  const root = await navigator.storage.getDirectory();
  const fileHandle = await root.getFileHandle('recipe_data.json', { create: true });
  const writable = await fileHandle.createWritable();
  await writable.write(JSON.stringify(data));
  await writable.close();
}

// 从OPFS读取数据
async function getRecipeData() {
  const root = await navigator.storage.getDirectory();
  const fileHandle = await root.getFileHandle('recipe_data.json');
  const file = await fileHandle.getFile();
  const content = await file.text();
  return JSON.parse(content);
}

该方案优势：

• 存储容量上限通常为设备剩余存储空间的10%，完全满足配方类小体量数据的存储需求
• 仅你的PWA可以访问该存储区域，数据私密性有保障
• 支持任意格式的文本、二进制数据存储，适配你的表格数据存储需求

方案2：IndexedDB + 持久化存储授权 #

如果需要兼容更低版本的iOS系统，可以选择IndexedDB方案，它是浏览器内置的非关系型本地数据库，默认是持久化存储，你可以主动申请持久化权限避免浏览器自动清理数据：

// 申请永久存储权限
async function applyPersistentStorage() {
  if (navigator.storage && navigator.storage.persist) {
    const isPersisted = await navigator.storage.persist();
    return isPersisted;
  }
  return false;
}

申请通过后，IndexedDB内的数据不会被常规缓存清理操作删除，你可以直接将配方表格数据按结构化格式存入IndexedDB中。

兜底方案：本地文件导出/导入 #

如果需要完全脱离浏览器存储，你可以新增数据导出导入功能：

• 导出时将配方数据转成CSV/JSON文件，通过a标签的download属性触发用户下载到设备本地存储目录
• 导入时通过文件选择器让用户读取本地备份的文件解析恢复数据
  该方案数据完全存储在用户设备的公共存储区域，哪怕PWA数据被清除也可以通过备份文件恢复。

注意事项 #

• 上述所有API都要求你的PWA通过HTTPS协议访问，本地开发环境使用localhost不受限制
• 永久存储权限申请时部分浏览器会弹出用户提示，用户同意后即可获得永久存储资格
• 所有存储数据都和你的PWA域名绑定，其他站点无法访问，不会出现数据泄露问题

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