如何保存所有页面的输入值并允许用户在页面重新加载时查看更改？

Question

我正在构建一个在线子弹日记，页面上有大量输入。输入不在元素中。

我想将所有输入保存到本地存储。加载页面时可以查看输入。我不想要“提交”按钮，除非“提交”按钮是唯一的选择。

下面的代码包含可能导致程序崩溃的错误。请帮助修复错误。

//here are my inputs
let eventInputList = [];
let calendarInputList = [];
let checkInputList = [];
let taskInputList = [];
let weekFormDateOne = document.getElementById("week-date-one");
let weekFormDateTwo = document.getElementById("week-date-two");
let textInputList = document.getElementsByTagName("textarea");

const getArrayElements = (array) => {
    for(let i = 0; i < array.length; i++){
        return array[i];
    };
 };

//here is my variable containing all the input values
let allInputsValues = monthInput.value + 
getArrayElements(eventInputList) + getArrayElements(calendarInputList) 
+ getArrayElements(checkInputList) + getArrayElements(taskInputList) + 
weekFormDateOne.value + weekFormDateTwo.value + 
getArrayElements(textInputList);


//here is my localStorage function
const saveAllEntries = () => {
    localStorage.setItem("allInputs", JSON.stringify(allInputsValues));
};

window.addEventListener("input", saveAllEntries);

const loadAllEntries = () => {
    localStorage.getItem("allInputs");
};

window.addEventListener("load", loadAllEntries);

Answer 1

只是一些观察。我可能不理解你的问题，也没有试图通过写基本信息来侮辱你的智慧。关于当地的故事。

1) 在窗口元素上使用input 事件会将所有页面数据写入local storage，以针对任何单个元素中的每次用户交互，例如键入或删除单个字母。那是没有效率的。 change 事件可能是一个更好的选择，它将分配给每个单独的输入元素而不是窗口，并会调用一个函数，该函数仅将元素数据写入本地存储，而不是页面上的所有数据。

您可能还想考虑当用户键入内容然后在编辑的元素失去焦点之前退出或刷新页面时会发生什么。 change 事件可能不会触发，直到输入元素失去焦点并且退出或刷新之前的最后一次更改不会被写入本地存储。您可以为这些情况添加其他事件或添加“保存更改”按钮，以便在单击时保存所有页面数据。不需要提交按钮。

2) 您不必将页面上的所有数据连接成一个 JSON 字符串，甚至根本不需要使用 JSON 字符串。现在，您只使用一个名称-值对。您可以在本地存储中使用多个名称-值对，一个用于每个数组变量，甚至一个用于每个数组的每个元素，一个用于长度。例如，calendarInputList 的一个名称，其中值是转换为文本的数组；或 calendarInputList_1, calendarInputList_2, calendarInputList_3, ... 和 calendarInputList_len 作为长度，这样您就有许多名称-值对。

如果每个数组项都有一个名称，您必须小心跟踪用户更改，例如删除 calendarInputList_2，因为这样所有值 calendarInputList_2 到本地存储中的最高索引名称都需要要被更新。名称 calendarInputList_3 将变为 calendarInputList_2，calendarInputList_4 将变为 calendarInputList_3，calendarInputList_5 将变为 calendarInputList_4 等等，包括将 calendarInputList_len 的值减 1。如果您选择该路线，您可以通过逐步本地存储和删除来删除并覆盖所有元素所有以“calendarInputList_”开头的名称，然后写入新的数组元素。

如果你想使用一个名称-值对，也许让 allInputsValues 成为一个对象。这样，结构将在 stringify 和 parse 之间保留。

3) 无论您选择何种路径，您都需要一种方法将本地存储中的数据返回到您的变量和页面中。如果使用 JSON.stringify，则需要使用 JSON.parse。无论您是否选择使用 JSON 字符串化和解析，在所有情况下，您都需要从本地存储中获取数据并将其写入变量和/或将其写入屏幕。您发布的代码不会解析 JSON 字符串，不会将字符串解读为其组成部分，也不会将这些部分写入变量或屏幕。例如，目前，您如何知道 allInputsvalues calendarInputList[3] 的位置？

当页面加载时，如果本地存储持续存在，则在从本地存储中检索 allInputsValues 后，您必须将其拆分并将每个部分写入屏幕上的相应区域。

Answer 2

您是否尝试过解析本地存储的内容并再次将其设置为 var？

 const loadAllEntries = () => {
      allInputsValues = JSON.parse(localStorage.getItem("allInputs"));
 }

Answer 3

我会从一组 id 开始

var ids = ["id1", "id2", "id3"];

ids.map((id) => {
     if(localstorage.get(id) != null){
         document.getElementById(id).value = localstorage.get(id);
     }
});

这会检查本地存储中的值并填充它们。然后你需要为每个输入添加一个 on change 监听器。

inputChanged(event){
   localstorage.put(event.target.id, event.value)
}

这将在每次输入更改时将值存储在本地存储中。

最后，我在脑海中输入了这个。我怀疑代码可以复制粘贴。你需要修复它。