Why data from local storage eliminates from Dom when refreshes

JavaScript
1

i am working on a todo project but when i store data in local storage and try to retrive it. After refreshing the browerser, those values stores in local storage are no longer on the display
here is the code

const todolist=document.getElementById('todolist')
const addBtn=document.getElementById('add')
const newNotes=JSON.parse(localStorage.getItem('newNotes'))

addBtn.addEventListener('click',function (e) {
    e.preventDefault()
    const input=document.getElementById('input').value 
    const textarea=document.getElementById('textarea').value
    
    const notesInfo={
        title:input,
        description:textarea
    }
    newNotes.push(notesInfo)
    
    
 
        newNotes.forEach((note)=>{
            const html=`
            <div class="main">
            <h2 id="title">${note.title}</h2>
            <p id="para">${note.description}</p>
            `
            
            todolist.insertAdjacentHTML('afterbegin',html)
        })
        localStorage.setItem('newNotes',JSON.stringify(newNotes))
        console.log(todolist)

        
            
            JSON.parse(localStorage.getItem('newNotes'));
       
}
)
3

can you elobrate it. const newNotes=JSON.parse(localStorage.getItem('newNotes') || '[]')
are u talking about this?

5

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