如何使用 pwa 保存数据答案

【问题标题】：How to save data with pwa如何使用 pwa 保存数据
【发布时间】：2021-10-08 15:43:24
【问题描述】：

我正在开发自己的项目，我想创建一个在 Android 和 iOS 上运行的应用程序。我决定使用 HTML、CSS 和 JavaScript 来创建 PWA。该应用程序应使用户能够管理包括馅饼在内的食谱。成本计算。我的问题是，我想以表格的形式保存食谱/配料。数据应永久存储在设备本地。使用“localstorage”方法，数据只是临时保存。我不想托管网络服务器/数据库。当用户删除浏览器的本地缓存时，数据不应该丢失。是否可以使用 java 脚本存储一般数据，例如在浏览器缓存之外的文本文件中？

【问题讨论】：

在你的情况下indexedDB 将是我的解决方案。
寻找像 firestore 或 parse 这样的“无服务器”数据库

标签： javascript progressive-web-apps

【解决方案1】：

在您的情况下，indexedDB 将是我的解决方案。它可以被用户删除，因为所有数据都存储在浏览器中。浏览器无法将数据存储在文本文件中（至少截至 2021 年 10 月）

【讨论】：

【解决方案2】：

这是可能的。但这并不简单，必须由用户手动完成。您可以将您的数据库生成为可下载文件 - 例如。 .txt 或 .csv- 并为用户提供下载链接或自动下载。这是一个例子。

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

// Start file download.
document.getElementById("dwn-btn").addEventListener("click", function(){
// Start the download of yournewfile.txt file with the content from the text area
    var text = document.getElementById("text-val").value;
    var filename = "yournewfile.txt";
    
    download(filename, text);
}, false);

要加载数据，您可以创建一个接收数据并填充表格的导入按钮。这是读取文件数据的方法

function readImage(file) {
  // Check if the file is text.
  if (file.type && !file.type.startsWith('text/')) {
    console.log('File is not an textfile.', file.type, file);
    return;
  }

  const reader = new FileReader();
  reader.addEventListener('load', (event) => {
    img.src = event.target.result;
  });
  reader.readAsDataURL(file);
}

我建议将此方法与 indexedDb 或本地存储一起使用。

【讨论】：