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

Я создаю пулевой онлайн-журнал с многочисленными записями на странице. Входы не находятся в элементе.

Я хочу сохранить все входные данные в локальное хранилище. Входные данные можно просмотреть, когда страница загружена. Мне не нужна кнопка «отправить», если только кнопка «отправить» не является единственным вариантом.

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

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

Объясните, пожалуйста, ваше значение doesn't work

Siamak Ferdos 29.10.2018 21:56

Это означает, что в коде нет ошибки, по крайней мере, кажется, что консоль ничего не видит, но когда я ввожу что-то в свои поля ввода и обновляю страницу, то, что я набрал, пропадает.

pandazorro 30.10.2018 02:12

Вы не назначаете результат localStorage.getItem("allInputs") в своей функции loadAllEntries переменной или не используете его для заполнения полей ввода на экране. После получения данных из localStorage вы должны что-то с ними сделать, например, обратную сторону вашего оператора let allInputValues = monthInput.value ....

Gary 30.10.2018 04:25

Результат JSON.parse на localStorage.getItem("allInputs") просто вернет вам строку значений, хранящуюся в allInputValues; поэтому вам нужно добавить его в значения компонентов и использовать их для заполнения экранных полей ввода.

Gary 30.10.2018 04:32
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
101
3

Ответы 3

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

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

Да, я только что пробовал, но все равно не работает :( Спасибо!

pandazorro 30.10.2018 02:21

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

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)
}

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

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

Для чего нужны идентификаторы?

pandazorro 30.10.2018 02:14

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

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 ​​объектом. Таким образом, структура будет сохранена между строкой и синтаксическим анализом.

3) Какой бы маршрут вы ни выбрали, вам нужен способ вернуть данные из локального хранилища в ваши переменные и на страницу. Если вы используете JSON.stringify, вам нужно использовать JSON.parse. Независимо от того, решите ли вы использовать JSON-строку и синтаксический анализ, во всех случаях вам необходимо получить данные из локального хранилища и записать их в переменную и / или записать их на экран. Опубликованный вами код не анализирует строку JSON, не расшифровывает строку на ее составные части и не записывает эти части в переменные или экран. В настоящее время, например, как узнать, где в allInputsvalues ​​находится CalendarInputList [3]?

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

Другие вопросы по теме