Is there a way that I can make my code detect the changes made in local storage before reloading?

I tried to check if a string value displays on the screen once a button is clicked.It works after reloading the page and then it stops same as before reloading it

let ids1 = document.getElementById('ids')
let ids2 = document.getElementById('ids2')

function saveit(){
    localStorage.setItem('store', ids1.value)
    localStorage.setItem('store2', ids2.value)
}

//button to save in local storage once is clicked on each ids1 item
let buttonAddSt = Array.from(div).forEach(e =>{ 
let inputButton = document.createElement('button')
inputButton.innerHTML = 'add'
inputButton.addEventListener('click', saveit )

    e.appendChild(inputButton) 
})

//button to display info once storage show has value/keys
let buttonTask = document.getElementsByClassName('create')

let local = localStorage.getItem('store')
let local2 = localStorage.getItem('store2')


let paro = document.createElement('p')
 paro.innerHTML = local

let newd = document.getElementsByClassName('newd')

//nested if statement to point out specific info missing 
if(local !== null ){
    if(local2 !== null){      
        buttonTask[0].addEventListener('click', fire)
    }else{
        buttonTask[0].addEventListener('click', () => {
            alert('date is required')
        })
    }

} else {
    buttonTask[0].addEventListener('click', () => {
        alert('description is required')
    })
    
}  

by clicking on buttonAddSt data is saved so I expected that clicking on buttonTask that will be display but it is like data in local storage key/values are not detected prior to reload even though I can see it. It works after reloading because data is already in localstorage but prior to that if I what to start on an empty input field I do if(local == null ) and it stops displaying the info after refresh, it is like Im in a loop