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

Question

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

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

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

有什么想法吗？

Answer 1

尝试

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>

Answer 2

[兼容性说明]

This solution uses <a> attribute download, to save the data in a text file.
This html5 attribute is only supported by Chrome 14+, Firefox 20+ and Opera 15+ on desktop, none on iOS and all current majors except WebView on Android.

-A workaround for IE 10+ is to not hide/destroy the link generated by clickSave()and ask user to right-click > Save target As…

-No known workaround for Safari.

Also note that data will still be accessible via localStorage.getItem() for Firefox 3.5+, Chrome&Safari 4+, Opera 10.5+ and IE 9+ (xhr will crash IE 8-)

我会这样做，假设您的实际代码通过 xhr.

保存数据

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

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

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

Ps：如果您的用户在没有连接的情况下离开页面，您将能够通过 localStorage.getItem("myAwesomeTextEditor")

取回文本

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

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

How to save data in local hd with javascript?

javascript

local-storage

navigator

[兼容性说明]