Local storage storing array data error

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">&copy</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

i have updated.html and js is given here

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.