Question

我想有一个离线网站 - 某种格式的HTML / JavaScript / CSS（文件夹，zip，SingleFile或MHTML） - 有一个用户A可以输入数据的表单，然后有该数据以某种方式保存到网站，以便它可以转移到另一个用户B，用户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访问它。

修改

如果浏览器兼容性不是很重要，这里有一个＆＃34;另存为/ open＆＃34;完全脱机工作的解决方案。仅在Chrome中测试，基于this post

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

3 个答案:

修改