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=".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 class="container">
<form id="form">
<div class="title">
<label for="title">Title</label>
<input type="text" name="title" id="title" placeholder="Enter Your Title">
</div>
<div class="text">
<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 class="notes" id="notes"></div>
<script src="nta.js"></script>
</body>
</html>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./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 class="container">
<form id="form">
<div class="title">
<label for="title">Title</label>
<input type="text" name="title" id="title" placeholder="Enter Your Title">
</div>
<div class="text">
<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 class="notes" id="notes"></div>
<script src="nta.js"></script>
</body>
</html>1 Answer
Reset to default 2The 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");