Why data from local storage eliminates from Dom when refreshes

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'));
       
}
)

Because you do not have any code to display the existing notes in local storage. You only show display something when the button is clicked.

I am not sure what your HTML looks like, but it appears your current code ends up adding duplicate divs.

Also, you have not handled the situation where a user first comes to the app. If there is nothing in local storage already, your app will throw an error in the console.

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

That will deal with the last issue I pointed out regarding a user first loading the app without any notes in local storage.