Question

我需要在本地磁盘上临时存储已编辑的“textarea”文本（> 1 MB）才能脱机工作。后来我想再次加载它并继续编辑，就像使用常见的桌面应用程序一样我知道我可以轻松加载文本文件并将其添加到textarea。但是如何保存呢？我在关于这个问题的博客中发了很多红色，并且有一些严肃的解决方案提议，如IndexdDB和Web SQL Storage。但是哪一个正在开发所有主流浏览器，并且将在（近）未来得到支持？我还没有找到任何当前明确的陈述。

Answer 1

您正在寻找主持人（window）Storage对象，特别是localStorage variant（因为sessionStorage变体只保留 - 您可能已经猜到了 - 会议）它受到所有现代浏览器的支持（按规格），通常可以容纳5 MB。

您可以在w3schools editor中尝试以下示例（因为出于安全原因，它无法在stack-snippets，jsfiddle，realtime-html-editor等上运行）。
另请注意，它不能在本地保存的网页中使用，因为当前浏览器仍需要完全限定的域名才能将安全措施和链接存储（也包括cookie等）应用于适当的域名！
这就是为什么我提到了可怕的w3schools（因为我找不到可以在没有webhosting运行的情况下工作的东西）。
最后，上面的“理由”也是为了解释为什么你可能在当地尝试的例子不起作用最后一种解决方法是设置本地Web服务器并将浏览器指向（本地）IP地址，从而解决浏览器需要有效域将存储链接到的“问题”!!! ^{（我非常喜欢tiny，因为需要有效网址的代码可以快速便携地进行本地搜索。）}

以下是提到的（测试）代码：^{（评论应该解释）}

<form>
  <textarea id="save_my_txt" placeholder="Enter text here.."></textarea>
  <input type="reset" value="reset">
</form>

<script>
(function(elm, key){
  // check for local storage support
  if(window.localStorage){
    // if there was data stored, retrieve it and output it to the elment
    if(localStorage.getItem(key)) elm.value=localStorage.getItem(key);
    // when the element is blurred and the content is changed
    elm.onchange=function(){
      // check if the textarea is empty and save or remove localStorage entry
      localStorage[this.value?'setItem':'removeItem'](key, this.value);
    };
    // finally, a form's reset does NOT fire it's element's onchange()
    // either 'fix' the reset-button (using `this.form.reset()`)
    // or the form's `onreset` handler (example below:)
    elm.form.onreset=function(){ localStorage.removeItem(key); };
  } // else handle the lack of Storage-support differently..
}( document.getElementById('save_my_txt')  // pass in a textarea
 , 'my_txt_str'                            // pass key-identifier for localStorage
 )
); //end IIFE
</script>

请注意，由于您已经请求了现代/未来的浏览器支持，我使用了html5 placeholder（减少了正确操作defaultValue所需的一些javascript以进行重置等）。

希望这会有所帮助!!

如何在本地磁盘上存储浏览器textarea的文本内容

1 个答案: