如何将数据保存在离线网站中？

Question

我想要一个离线网站 -- 某种格式的 HTML/JavaScript/CSS（文件夹、zip、SingleFile 或 MHTML） -- 有一个用户 A 可以输入数据的表单，然后拥有该数据以某种方式保存到网站，以便可以将其传输给另一个用户 B，后者可以打开它并查看数据。这个想法是模仿您在可填写表单的 PDF 中找到的功能。

使用localStorage 可以轻松保存数据，但随后它驻留在用户A 的浏览器中。据我了解，网站无法将文件直接保存到硬盘。那么这怎么可能实现呢？我唯一能想到的就是让表单将数据“导出”到用户 A 必须复制、粘贴到编辑器中并保存到本地网站上的适当位置的某个 JSON 中。但也许有更好的解决方案？

Answer 1

您创建 JSON 的方法看起来不错，您可以使用一个按钮将 JSON 保存到文件中。类似的东西;

jsobj = jsobjectwithyourdata
var json = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(jsobj));
$('<a href="data:' + json + '" download="export.json">Download</a>').appendTo('#somewhere');

那么您的用户所要做的就是点击链接。

Answer 2

浏览器旨在防止网站出于安全目的以任何方式修改用户计算机。除了本地存储之外，您将很难从浏览器中保存任何内容。

但是，有一些应用程序可以帮助您编写 html/js/css 桌面应用程序，例如 http://appjs.com/。这可以让你打包一些东西来完成你正在寻找的东西。

对于使用 html/css/js 的桌面应用程序的类似讨论，我建议使用以下评论线程： How to develop Desktop Apps using HTML/CSS/JavaScript?

Answer 3

另一种选择是将用户 A 的数据存储在 localStorage 中，然后定期检查是否有互联网连接。

如果可以连接到您的服务器，请将用户 A 的 localStorage 中的所有数据与您的服务器同步，然后授予用户 B 访问权限。

编辑

如果浏览器兼容性不是很重要，这里有一个“另存为/打开”解决方案，可以完全离线工作。仅在 Chrome 中测试，基于 this post

window.upload = function(files) {
    var f = files[0];
    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
          var contents = e.target.result;
          document.getElementById("result").innerHTML = contents;
      }
      r.readAsText(f);
    } else { 
      alert("Failed to load file");
    }
}

window.download = function(filename) {
    var data = {
        foo: 1,
        bar: 2
    }
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(data)));
    pom.setAttribute('download', filename);
    pom.style.display = 'none';
    document.body.appendChild(pom);
    pom.click();
    document.body.removeChild(pom);
    return false;
}

<strong>Save data </strong>
<button onclick="download('download.txt')">Download data</button>
<br />
<strong>Read from file </strong>      
<input type="file" id="input" onchange="upload(this.files)">
<p>Result:</p>
<div id="result"></div>