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

尝试将函数提供为要由load事件调用的处理程序。不要自己调用

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

单击按钮后如何在不刷新页面的情况下显示本地存储的内容？

2 个答案: