Javascript 如何保存所有页面'；是否允许用户在重新加载页面时查看更改？

我正在建立一个在线子弹杂志，页面上有许多输入。输入不在元素中

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

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

//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);

//这是我的输入
让eventInputList=[]；
让calendarInputList=[]；
让checkInputList=[]；
让taskInputList=[]；
让weekFormDateOne=document.getElementById（“第一周日期”）；
让weekFormDateTwo=document.getElementById（“第二周日期”）；
让textInputList=document.getElementsByTagName（“textarea”）；
常量getArrayElements=（数组）=>{
for（设i=0；i{
setItem（“allInputs”，JSON.stringify（allInputsValues））；
};
window.addEventListener（“输入”，saveAllEntries）；
常量loadAllEntries=（）=>{
localStorage.getItem（“allInputs”）；
};
window.addEventListener（“加载”，加载入口）；

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

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

---

我将从一个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)
}

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

---

最后，我把它从头顶上打了下来。我怀疑代码是否可以复制粘贴。您需要修复它。

只需几次观察。我可能不理解你的问题，也不是试图通过写基本信息来侮辱你的智慧。关于本地存储

1） 使用window元素上的

input

事件，为任何单个元素中的每个用户交互（例如键入或删除单个字母）将所有页面数据写入

本地存储。这是没有效率的。
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\”开头的名称，然后写入新的数组元素来删除并覆盖所有元素

如果要使用一个名称-值对，可以将AllInputsValue设置为对象。这样，结构将保留在stringify和parse之间

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

加载页面时，如果本地存储保持不变，则从本地存储检索AllInputsValue后，必须将其拆分，并将每个部分写入屏幕上的相应区域
 请解释你的
的意思不起作用
它意味着代码中没有错误，至少控制台似乎没有看到任何错误，但当我在输入中键入内容并刷新页面时，我键入的内容就消失了。你没有分配
localStorage.getItem（“allInputs”）的结果
在
中，将输入项
函数加载到变量，或使用它填充屏幕输入。一旦从localStorage中检索数据，就必须对其进行处理，例如与
let allInputValues=m相反