i’m working on a project,i stuck in storing data in local storage .
First i create an
empty array
Then push textarea values in it,store data in local storage
But when i change textarea values instead os storing new values,it replace the values
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local storage concepts</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1 class="non-essential">TODO_LIST</h1>
<input type="search" name="search" class="filter" placeholder="Search">
</div>
<form action="" id="form">
<textarea type="text" cols="30" rows="1" placeholder="Enter Title" id="input"></textarea>
<textarea name="" id="textarea" cols="30" rows="4" placeholder="Enter Task TODO"></textarea>
<input type="submit" value="Add Task" id="add">
</form>
<div id="todolist">
</div>
<!--
<footer class="footer">
<div class="copyright">©</div>
<h5>remu</h5>
</footer> -->
<script src="/main.js"></script>
</body>
</html>
js
const updateView=()=>{
const textareaData=document.querySelectorAll('textarea')
const notes=[]
console.log(notes)
textareaData.forEach(note => {
return notes.push(note.value)
});
localStorage.setItem('notes',JSON.stringify(notes))
}
const addBtn = document.getElementById('add')
const addNewNote=(text='')=>{
// getting title input value
const inputtitle = document.getElementById('input').value
console.log(inputtitle)
// getting text area detail
const textArea = document.getElementById('textarea').value
console.log(textArea)
// creating div
const note=document.createElement('div')
note.className='main'
const creatingtitle=document.createElement('h2')
creatingtitle.setAttribute('id','gettitle')
note.appendChild(document.createTextNode(inputtitle))
console.log(creatingtitle)
const creatingtask=document.createElement('p')
creatingtask.setAttribute('id','gettask')
note.appendChild(document.createTextNode(textArea))
console.log(creatingtask)
creatingtitle.value=text
creatingtask.value=text
updateView()
const deleteBtn=document.createElement('button')
deleteBtn.setAttribute('id','deleteBtn')
note.appendChild(document.createTextNode('delete'))
const todolist=document.querySelector('#todolist')
todolist.appendChild(note)
}
const notes=JSON.parse(localStorage.getItem('notes'))
if (notes) {
notes.forEach((note)=>addNewNote(note))
}
addBtn.addEventListener('click', (e) => {
addNewNote(notes)
e.preventDefault()
})
Can u guide me? I’ll be thankful to you