我正在构建一个日程安排web应用程序，它显示了一天中的时间，文本区域和保存按钮并排的每小时的行表。用户可以在给定时间旁边的文本区输入他们的信息，单击按钮，它将把他们的输入保存到localStorage。在刷新时，当我console.log它时，localStorage仍然显示保存的用户输入，但它不会用它重新填充文本区域。我希望他们的用户输入在他们刷新页面时仍然显示在那些文本区域，但关于我如何使用localStorage。getItem似乎不起作用。我想要一些帮助，谢谢你!
(提前抱歉，图片是作为链接发布的，它不允许我嵌入它们)
下面是我为表格的每一行设置的HTML示例，其中包括textarea。
这是我当前的JS添加用户输入到localStorage。
这是所有我已经得到了我的getItem函数到目前为止，这是我需要帮助修复!
,
更新:这是修复我的问题的最终代码!
// save button was clicked
for (var i = 0; i < saveBtns.length; i++){
saveBtns[i].addEventListener("click", function(event) {
event.preventDefault();
// define event text array
var events = [];
for (var i = 9; i <= 17; i++) {
events[i] = document.getElementById(i).value;
}
//save events to localStorage
localStorage.setItem("events", JSON.stringify(events));
console.log(localStorage);
})};
// load saved user input on refresh
var loadEvents = function() {
var events = JSON.parse(localStorage.getItem("events"));
// populate the textareas
for (var hour in events) {
if (events[hour]) // check if value is not null
document.getElementById(hour).value = events[hour];
}
}
loadEvents();
以24小时格式存储时间(即0-24，其中17:00 = (17-12)PM = 5PM)。这将允许您存储上午9点到下午5点，编号9-17作为索引，这是按时间顺序的&一个完美的升序，而不是9-12然后重置为1-5PM。
在表示一天中的小时的索引处存储值:
var events = [];
// 9AM to 5PM
for(var i=9; i<=17; i++) {
events[i] = document.getElementById(i).value;
}
确保每个文本区域都有一个24小时格式的数字ID(在本例中为9-17)。
现在，您需要在从localStorage获取项目后设置文本区域的value属性。
var loadEvents = function() {
var events = JSON.parse(localStorage.getItem("events"));
// Populate the textareas
for (var hour in events) {
if(events[hour]) // Check if value is not null
document.getElementById(hour).value = events[hour];
}
}
如果您希望在页面加载时重新填充:
document.addEventListener('load', loadEvents);
请记住，只有当脚本在页面加载之前加载时，load事件才会触发。如果您的脚本在页面加载之后才加载，您可以简单地调用该函数:
loadEvents();
如果您符合上述要求，则不应刷新屏幕，而应仅存储数据。
如果确实需要刷新屏幕，可以考虑在刷新屏幕后取出数据并将值重新分配给组件。