cuando llamo a la función de devolución de llamada de collectform dentro del oyente formButton, obtengo todo bien, excepto que no veo los datos del objeto en el almacenamiento local de Chrome inmediatamente a menos que actualice el almacenamiento local manualmente.

 function collectFormData(e) { e.preventDefault() let noteTitle = tiTxt.value let noteContent = pTxt.value let date = new Date() const currTime = (date.toLocaleString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })); let noteObj = { noteTitle, noteContent, loc, currTime } if (!noteTitle && !noteContent === true) { alert('Add note title and content'); } else { allNotes.push(noteObj) wlocalStorage.setItem('noteData', JSON.stringify(allNotes)); (function () { return JSON.parse(localStorage.getItem('noteData')); })() let payload = noteObj; payloadArray.push(payload) // xhr object listen on the server and send data to the server let xhr = new XMLHttpRequest(); xhr.open('POST', '/dash'); xhr.setRequestHeader('content-type', 'application/json;charset=UTF-8'); xhr.send(JSON.stringify(payloadArray)) function showData() { let htmlNote = ` <div class="new-content"> <div class="new_content-child"> <div class="parent_h2-span"> <h2 class="content-h2">${noteTitle}</h2> <span>${currTime}</span> </div> <div class="parent_content-p"> <p class="content-p">${noteContent}</p> </div> <div class="locality-container"> <p class="locality-p">${loc}</p> <span class="edit-con"> <i class="edit-fa fa fa-trash" aria-hidden="false"></i> </span> </div> </div> </div> ` contentContainer[0].insertAdjacentHTML('afterbegin', htmlNote) } showData() tiTxt.value = pTxt.value = ''; } } try { formButton.addEventListener('click', collectFormData) }