[英]How do I display the contents of local Storage after button click without refreshing the page?
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();
});
The loadData
function is only adding an event listener. loadData
函数仅添加事件侦听器。 It is not displaying the data in localStorage. 它不会在localStorage中显示数据。
Try replacing the loadData()
call in the submit callback with displayStorage()
. 尝试用
displayStorage()
替换loadData()
回调中的loadData()
调用。
try providing the function as a handler to be invoked by the load event. 尝试将函数提供为由load事件调用的处理程序。 Not invoke it by yourself
不要自己调用
const loadData = () =>
document.querySelector('body').addEventListener('load', displayStorage);
You can try reloading the page by yourself using location.reload
您可以尝试使用
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()
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.