Getting data from local storage in JavaScript

Question

I am making a Notes Taking website using JavaScript.In this everything work fine but when I refresh page only container show(i.e previously saved textarea field show but "content" from local storage doesn't show inside that container)

Can anyone help me to solve this issue? I am sharing my code with you

  
// adding data in local storage
function storingData(){
  
  var allNotes = document.querySelectorAll(".mainText")
 
  const notesData = [];

 
  allNotes.forEach((element)=>{
    return notesData.push(element.value)
    
  });
  
  
localStorage.setItem("notess", JSON.stringify(notesData));



}

  
  function addNote(){
    
    var mainDiv= document.createElement('div');
    mainDiv.classList.add('main');
 
    var noteField = `
  <div class="operation">
<i class="fa-solid savebtn fa-2x fa-floppy-disk "></i>
<i class="fa-solid fa-2x editBtn fa-pen-to-square"></i>
<i class="fa-regular fa-2x delete fa-trash-can"></i>
</div>
   <input type="text" class="title" placeholder="Enter title"/>
  <textarea class="mainText" placeholder="Enter Notes here"></textarea>
`;

mainDiv.insertAdjacentHTML('afterbegin',noteField);
document.getElementById('NoteSectionLayout').appendChild(mainDiv);

// references
var save = mainDiv.querySelector(".savebtn");
var maintext = mainDiv.querySelector(".mainText");
var title = mainDiv.querySelector(".title");
var edit = mainDiv.querySelector(".editBtn");
var del = mainDiv.querySelector(".delete");

// saving note
  save.addEventListener('click',()=>{
   maintext.setAttribute("disabled",true)
   title.setAttribute("disabled",true)
  storingData();
  });
  
  // editing note
  edit.addEventListener("click",()=>{
   maintext.removeAttribute("disabled");
   title.removeAttribute("disabled");
  });
  
  // delete note
  del.addEventListener("click",()=>{
    mainDiv.remove();
  });

  }  
 
 
 // getting data from local storage 
const notesSavedData = JSON.parse(localStorage.getItem("notess"));

  if(notesSavedData){
    notesSavedData.forEach((element) => addNote())
   // console.log("working") 
  }
 
  addBtn.addEventListener('click',addNote) ```