Как отобразить содержимое локального хранилища после нажатия кнопки без обновления страницы?

Question

Я хочу, чтобы содержимое локального хранилища отображалось при нажатии кнопки «Отправить» без обновления страницы.Я не вижу внесенных изменений, пока я не обновлю страницу вручную

Эта функция обрабатывает загрузку страницы.При нажатии кнопки отображаются неверные данные.Правильные данные отображаются только при обновлении страницы вручную.

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

Это прослушиватель событий, который обрабатывает сохранение:

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

Функция loadData только добавляет прослушиватель событий. Данные не отображаются в localStorage.

Попробуйте заменить loadData() вызов в обратном вызове отправки на displayStorage().

Answer 2

попробуйте предоставить функцию в качестве обработчика, который будет вызываться событием загрузки.Не вызывайте его самостоятельно

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

Вы можете попробовать перезагрузить страницу самостоятельно, используя 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()
});