Unexpected non-whitespace character after JSON at position 30-CodePudding

im trying to create a note taking app. first i save the title and text on local storage however when i want to get it back from local storage and parse it, it gives me this error. it works fine for first the first time i submit title and text , But after i try to add another one and get it back from local storage and parse it this happens if i dont parse it,it works fine.

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

//variables
let objArray = [];
let note = [];

//form
form.addEventListener("submit", getObj);
function getObj(e) {
  e.preventDefault();
  const data = new FormData(e.target);
  const obj = Object.fromEntries(data.entries());
  objArray.push(JSON.stringify(obj));
  localStorage.setItem("form", objArray);
  let getNote = localStorage.getItem("form");
  getNote = JSON.parse(getNote);
  note.push(getNote);
  console.log(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" name="title" id="title" placeholder="Enter Your Title">
    </div>

    <div >
      <label for="text">Text</label>
      <textarea id="text" name="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：

The problem is that you stringify individual items, but not the entire array

const obj = Object.fromEntries(data.entries());
objArray.push(obj);
localStorage.setItem("form", JSON.stringify(objArray));
let getNote = localStorage.getItem("form");