尝试在 HTML/JS 中制作类似记事本的脚本答案

【问题标题】：Trying to make a notepad like script in HTML/JS尝试在 HTML/JS 中制作类似记事本的脚本
【发布时间】：2020-09-04 01:37:48
【问题描述】：

编辑：只是确认一下：我希望保存用户输入的内容，以便当他重新加载/离开网页并返回之前他写的内容仍然存在。

我尝试使用 cookie，但是当我重新加载页面时它只放置了一行 Default(variable)。我现在试图让它与 localStorage 一起工作，但是当我重新加载时，它将 textarea 设置为“[object HTMLTextAreaElement]”或空白。我读到这个错误可能是由于忘记在 getElementById() 之后添加 .value 引起的，但我没有犯这个错误。我在 Github(pages) 上托管和测试网页。我究竟做错了什么？这是代码（忽略 cmets，它也可能在 jsfiddle 中不起作用，因为 localstorage 对我不起作用）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>le epic web page</title>
    </head>
    <body><!--&#13;&#10; = "\n"-->
<textarea id="txt" rows="4" cols="50" oninput="save();"></textarea>
  <script>  
  var Default="P1 Homework: \nP2 Homework: \nP3 Homework: \nP4 Homework: \n";
  
  if(localStorage.getItem("P") == ""){
    document.getElementById("txt").value=Default;
    localStorage.setItem("P")=Default;
  }else{
    document.getElementById("txt").value=localStorage.getItem("P");
  }
  //update cookie (called when typed)
  function save(){
    var txt=document.getElementById("txt").value;
    //txt=txt.replace(/\r\n|\r|\n/g,"</br>");
    localStorage.setItem("P",txt);//set cookie to innerHTML of textArea, expires in 1 day
  }
  //when page closed/reloaded
  window.onbeforeunload = function(){
   localStorage.setItem("P",txt);//update cookie when page is closed https://stackoverflow.com/a/13443562
    }
  </script>
  
    </body>
</html>

【问题讨论】：

标签： javascript html cookies

【解决方案1】：

当您退出页面时，您正在引用文本元素并将其存储在本地存储中。由于 localStorage 是一个字符串，它会将 html 元素引用转换为您看到的文本。

window.onbeforeunload = function(){
   localStorage.setItem("P",txt);
}

您使用 save 正确地执行了此操作，因此只需使用 beforeunload 事件调用 save

window.addEventListener('beforeunload', save);

代码中的另一个错误是该行

if(localStorage.getItem("P") == ""){

当 localStorage 未设置时，它返回 null。所以检查需要是一个真实的检查（或者你可以检查 nullv）

if(!localStorage.getItem("P")){

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>le epic web page</title>
  </head>
  <body>
    <textarea id="txt" rows="4" cols="50" oninput="save();"></textarea>
  </body>
  <script>
    const Default =
      "P1 Homework: \nP2 Homework: \nP3 Homework: \nP4 Homework: \n";

    if (
      localStorage.getItem("P") === "" ||
      localStorage.getItem("P") === null ||
      localStorage.getItem("P") === undefined
    ) {
      localStorage.setItem("P", Default);
    } else {
      let currentValue = document.getElementById("txt");
      currentValue.value = localStorage.getItem("P");
    }
    function save() {
      let txt = document.getElementById("txt").value;
      localStorage.setItem("P", txt);
    }

    window.onbeforeunload = function () {
      let txt = document.getElementById("txt").value;
      localStorage.setItem("P", txt);
    };
  </script>
</html>

【讨论】：