How do I display the contents of local Storage after button click without refreshing the page?

Question

I want the contents of the local Storage to be displayed when the submit button is clicked without having to refresh the page. I don't see the changes made until I manually refresh the page

This function handles the page load. When a button is clicked it shows wrong data. The correct data is only shown when the page is manually refreshed.

const loadData = () =>
  document.querySelector('body').addEventListener('load', displayStorage());

This is the event listener that handles saving:

notesForm.addEventListener('submit', e => {
  e.preventDefault();
  const save = (sid, spost, sdate) => {
    const obj = { id: sid, post: spost, date: sdate };
    localStorage.setItem(`${sid}`, JSON.stringify(obj));
  };
  save(generateId(), post.value, dateFormat());
  loadData();
});

Answer 1

The loadData function is only adding an event listener. It is not displaying the data in localStorage.

Try replacing the loadData() call in the submit callback with displayStorage() .

Answer 2

try providing the function as a handler to be invoked by the load event. Not invoke it by yourself

const loadData = () =>
  document.querySelector('body').addEventListener('load', displayStorage);

You can try reloading the page by yourself using location.reload

notesForm.addEventListener('submit', e => {
  e.preventDefault();
  const save = (sid, spost, sdate) => {
    const obj = { id: sid, post: spost, date: sdate };
    localStorage.setItem(`${sid}`, JSON.stringify(obj));
  };
  save(generateId(), post.value, dateFormat());
  loadData();
  location.reload()
});