how to add notes to localStorage?-CodePudding

I'm trying to create a note taking app which save notes to local Storage but I don't know how and I don't understand how they do it in tutorials.

When I add it to local Storage and refresh page it disappear from page and local Storage I know I'm doing it wrong so I appreciate your help. Here is the Codepen.

//getting our variables by ID
let title = document.getElementById('title');
let text = document.getElementById('text');
let submit = document.getElementById('submit');
let notes = document.getElementById('notes');
let form = document.getElementById('form');

form.addEventListener("submit",function(e){
  e.preventDefault();
})


submit.addEventListener('click',function(){
  // Creating our variables
  let note = document.createElement('div');
  let noteTitle = document.createElement('div');
  let noteT = document.createElement('div');
  let view = document.createElement('button');
  let delet = document.createElement('button');
  let noteBtn = document.createElement('div');

  //change value of title and note
  noteTitle.innerText = title.value;
  noteT.innerText = text.value;
  delet.innerHTML = '<i ></i>';
  view.innerHTML = '<i ></i>';

  //adding our title and note 
  note.append(noteTitle);
  note.append(noteT);
  noteBtn.append(view);
  noteBtn.append(delet);
  note.append(noteBtn)
  notes.append(note);

  //adding class to our variables
  note.classList.add("note");
  noteTitle.classList.add('note-title');
  noteT.classList.add('note-t');
  delet.classList.add('delete');
  view.classList.add('view');
  noteBtn.classList.add("noteBtn")

  localStorage.setItem("mNotes",note);
})

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background: url(../note\ taking/white-painted-wall-texture-background.jpg) no-repeat;
  background-position: center;
  background-size: cover;
  height: 100vh;
}
h1{
  text-align: center;
  margin-top: 40px;
  font-weight: bold;
}
.title{
  display: grid;
  flex-direction: column;
  width: 50%;
  margin: 20px auto;
}
.text{
  display: grid;
  flex-direction: column;
  width: 50%;
  margin:auto;
}
form{
  font-size: 1.4rem;
  font-weight: bold;
}
form input{
  margin-top: 5px;
  padding: 7px;
  border-radius: 5px;
}
form textarea{
  margin-top: 5px;
  padding: 7px;
  border-radius: 5px;
}
.text button{
  width: 20%;
  padding: 10px;
  margin: auto;
  margin-top: 40px;
  border-radius: 10px;
  background:rgb(36, 179, 134);
  border:none;
  transition: 0.4s;
  cursor: pointer;
  color: white;
  font-weight: bold;
  font-size: 1.1rem;
}
.text button:hover{
  background:white;
  color:rgb(36, 179, 134);
}
.container{
  margin-bottom:50px;
}

.note{
  width: 65%;
  background:white;
  border-radius: 10px;
  padding: 15px;
  margin: 10px auto;
  box-shadow: 0 0 3px;
}
.note-t{
  width: 100%;
  text-align: justify;
}
.note-btn{
  margin-top: 20px;
  display: flex;
  justify-content: space-evenly;

}
.delete{
  font-size: 1.2rem;
  border: none;
  cursor: pointer;
  color:red;
  background: transparent;
  border-radius: 7px;
}
.view{
  
  font-size: 1.2rem;
  border: none;
  cursor: pointer;
  color:rgb(39, 36, 36);
  border-radius: 7px;
  background: transparent;
}
.note-title{
  font-weight: bold;
  font-size: 2rem;
  padding: 10px;
}
.noteBtn{
  display: flex;
  justify-content: space-evenly;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="nta.css">
  <script src="https://kit.fontawesome.com/b904d616ca.js" crossorigin="anonymous"></script>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Note Taking App</h1>
  <div >
    <form id="form">
      <div >
      <label for="title">Title</label>
      <input type="text" id="title" placeholder="Enter Your Title">
    </div>

    <div >
      <label for="text">Text</label>
      <textarea id="text" placeholder="Enter Your Text" rows="5" cols="40"></textarea>
      <button id="submit">Save</button>
      </div>
    </form>
  </div>
  <div  id="notes"></div>
  <script src="nta.js"></script>
</body>
</html>

CodePudding user response：

MDN documentation on Window.localStorage:

The keys and the values stored with localStorage are always in the UTF-16 string format

In your code you're trying to store a DOM node which is not permitted. Instead, when you submit the form, grab its entries using FormData - more documentation here - stringify it to JSON, and then add that string to local storage instead.

(Note: the snippet doesn't allow local storage access due to security concerns, but you can see it working properly here - just look in your dev tools under "storage", then "local storage", and the "https://jsfiddle.shell.net" entry.)

const form = document.querySelector('form');
const button = document.querySelector('button');
button.addEventListener('click', handleClick);

function handleClick(e) {
  e.preventDefault();
  const data = new FormData(form);
  const obj = Object.fromEntries(data.entries());
  const json = JSON.stringify(obj);
  console.log(json);
  // localStorage.setItem('form', json);
}

label { display: block; }

<form>
  <label>Name <input type="text" name="name"></label>
  <label>Age <input type="number" name="age"></label>
  <label>Location <input type="text" name="location"></label>
  <button type="button">Submit</button>
</form>

Additional documentation

Object.fromEntries