when I call the collectform callback function inside the formButton listener, I get everything good except that I don't see the object data in the chrome local storage immediately unless i refresh the local storage manually.

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