如何使用javascript在本地高清保存数据？

Question

我正在使用CKEditor在创建文档的网站中创建文本。问题是互联网连接，PC远离城镇，它的3G连接不稳定。我已经有一个例程，每隔十秒（或用户希望的时间）保存一个草稿，以便安全 - 简单的任务。问题是，如果互联网出现故障，用户将不得不选择 - 复制文本并尝试使用某些文本编辑器（可能是Word，将其弄得一团糟）在本地保存。

所以我想知道是否已经存在一种创建文件并在没有远程服务器的情况下下载到本地HD的方法，只需要JavaScript和导航器。此外，它可能是另一种保存作业但保持CPU打开和导航器打开的方法，但在堆栈溢出时找不到。

我发现只有一个兼容的非标准API FireFox： Device Storage API 当然，不是JavaScript标准，所以我不知道现在使用它是否是一个好主意。

有什么想法吗？

Answer 1

[兼容性说明]

  

此解决方案使用<a>属性 download ，将数据保存在文本文件中。
  此html5属性仅受Chrome 14+, Firefox 20+ and Opera 15+支持   桌面， iOS 上没有以及除 Android 上的WebView之外的所有当前主要内容。

     

- IE 10+的解决方法是不隐藏/销毁clickSave()生成的链接，并要求用户right-click＆gt; Save target As…

     

- Safari的已知解决方法。

     

另请注意，仍可通过以下方式访问数据   localStorage.getItem()   适用于Firefox 3.5 +，Chrome＆amp; Safari 4 +，Opera 10.5+和IE 9+ （xhr会   崩溃IE 8 - ）

---

我会这样做，假设您的实际代码通过xhr保存数据。

＆＃13;

＆＃13;

function saveData() {
    var xhr = new XMLHttpRequest();
    //set a timeout, in ms, to see if we're still connected
    xhr.timeout = 2000;
    xhr.addEventListener('timeout', localStore, false);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
        // not a good news
        if (xhr.status !== 200) {
          localStore();
        }
        else{
          document.querySelector('#local_alert').style.display = 'none';
        }
      }
    }
    //I assume you already have the part where you set the credentials
    xhr.open('POST', 'your/url.php');
    xhr.send();
  }

  //Show the link + Store the text in localStorage
  function localStore() {
    document.querySelector('#local_alert').style.display = 'block';
    var userText = document.querySelector('textArea').value;
    localStorage.setItem("myAwesomeTextEditor", userText);
  }

  //provide a link to download a file with txt content
  window.URL = window.URL || window.webkitURL;
  function clickSave(e) {
    var userText = document.querySelector('textArea').value;
    var blob = new Blob([userText], {type: 'plain/text'});
    var a = document.createElement('a');
    a.download = "myAwesomeTextEditor" + (new Date).getTime() + '.txt';
    a.href = URL.createObjectURL(blob);
    a.style.display = "none";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    }

  setInterval(saveData, 3000);

＆＃13;

#local_alert {
  display: none;
  position: static;
  width: 100%;
  height: 3em;
  background-color: #AAA;
  color: #FFF;
  padding: 0.5em;
}
body,
html {
  margin: 0
}

＆＃13;

<div id="local_alert">You're actually offline, please beware your draft is not saved on our server
  <button onclick="clickSave()">Save Now</button>
</div>

<textarea></textarea>

＆＃13;

＆＃13;

＆＃13;

Ps：如果您的用户在没有连接的情况下离开了该页面，您就可以通过localStorage.getItem("myAwesomeTextEditor")

返回该文本了

PPs：更多＆＃34;生活＆＃34;示例可以找到here（它不会保存到服务器，但您已经完成了剩余的逻辑工作）。尝试断开连接，然后重新连接。

Answer 2

尝试

var editor = document.getElementById("editor");
var saveNow = document.getElementById("save");

function saveFile() {
    if (confirm("save editor text")) {
      var file = document.createElement("a");
      file.download = "saved-file-" + new Date().getTime();
      var reader = new FileReader();
      reader.onload = function(e) {
        file.href = e.target.result;
        document.body.appendChild(file);
        file.click();
        document.body.removeChild(file);
      };
      reader.readAsDataURL(new Blob([editor.value], {
        "type": "text/plain"
      }));
    }
};



saveNow.addEventListener("click", saveFile, false);

<button id="save">save editor text</button><br />
<textarea id="editor"></textarea>