Как я могу сохранить все входные значения страницы и позволить пользователю просматривать изменения при перезагрузке страницы?

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

Я бы начал с массива идентификаторов

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

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

Это проверяет локальное хранилище для значений и заполняет их. Затем вам нужно добавить прослушиватель изменений при каждом входе.

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

Это будет хранить значения в локальном хранилище каждый раз при изменении входа.

Наконец, я набрал это на макушке. Я сомневаюсь, что код может быть скопирован. Вам нужно будет это исправить.

Answer 2

Просто пара наблюдений. Я, возможно, не понимаю ваш вопрос и не пытаюсь оскорбить ваш интеллект, написав основную информацию. о местном прародже.

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 stringify и анализировать, во всех случаях вам нужно получить данные из локального хранилища, записать их в переменную и / или записать на экран. Ваш опубликованный код не анализирует строку JSON, не расшифровывает строку в ее составные части и не записывает эти части в переменные или на экран. В настоящее время, например, как вы узнаете, где внутри allInputsvalues ​​calendarInputList [3] расположен?

Когда страница загружается, и если локальное хранилище сохраняется, после того, как allInputsValues ​​извлечено из локального хранилища, вы должны разбить его на части и записать каждую часть в соответствующую область на экране.

Answer 3

Вы пытались проанализировать содержимое локального хранилища и снова установить его в переменную?

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