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）使用window元素上的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的数组开始

@FXML
private void onShowDateTime() {
    fieldStr.setDisable(true);
}

@FXML
private void onShowStr() {
    fieldStr.setDisable(false);
}

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

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

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

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

最后我在脑海中打了这个字。我怀疑代码是否可以复制粘贴。您将需要修复它。

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

3 个答案: