Trying to make a notepad like script in HTML/JS

Question

Edit: Just confirming: I want what the user typed to be saved so that when he reloads/leaves the webpage and comes back what he wrote earlier is still there.

I tried using cookies but it only put one line of Default(variable) when I reloaded the page. Im trying to get it to work with localStorage now but it sets the textarea to "[object HTMLTextAreaElement]" or blank when I reload. I read that this error can be caused by forgetting to add the .value after getElementById() but I did not make this mistake. I am hosting and testing the webpage on Github(pages). What am I doing wrong? here is the code(ignore the comments also it might not work in jsfiddle bc it localstorage didn't work there for me):

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

score 1 · Accepted Answer · answered Sep 03 '20 at 17:21

When you are exiting the page, you are referencing the text element and storing that in localstorage. Since localStorage is a string it converts the html element reference into the text you see.

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

You are doing it correctly with save, so just call save with the beforeunload event

window.addEventListener('beforeunload', save);

Another bug in the code is the line

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

when localStorage is not set, it returns null. So the check would need to be a truthy check ( or you can check for nullv)

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

score 1 · Answer 2 · answered Sep 03 '20 at 17:37

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

Trying to make a notepad like script in HTML/JS

2 Answers2