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

Question

我希望有一个离线网站 - 某种格式（文件夹，zip，SingleFile或MHTML）的HTML/JavaScript/CSS） - 它有一个用户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 的桌面应用程序进行类似的讨论：如何使用 HTML/CSS/JavaScript 开发桌面应用程序？

Answer 3

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

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

编辑

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

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>