Я создаю пулевой онлайн-журнал с многочисленными записями на странице. Входы не находятся в элементе.
Я хочу сохранить все входные данные в локальное хранилище. Входные данные можно просмотреть, когда страница загружена. Мне не нужна кнопка «отправить», если только кнопка «отправить» не является единственным вариантом.
Приведенный ниже код содержит ошибки, которые могут привести к сбою программы. Помогите, пожалуйста, исправить ошибки.
//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);
Это означает, что в коде нет ошибки, по крайней мере, кажется, что консоль ничего не видит, но когда я ввожу что-то в свои поля ввода и обновляю страницу, то, что я набрал, пропадает.
Вы не назначаете результат localStorage.getItem("allInputs")
в своей функции loadAllEntries
переменной или не используете его для заполнения полей ввода на экране. После получения данных из localStorage вы должны что-то с ними сделать, например, обратную сторону вашего оператора let allInputValues = monthInput.value ...
.
Результат JSON.parse на localStorage.getItem("allInputs")
просто вернет вам строку значений, хранящуюся в allInputValues
; поэтому вам нужно добавить его в значения компонентов и использовать их для заполнения экранных полей ввода.
Вы пробовали проанализировать содержимое вашего локального хранилища и снова установить его в var?
const loadAllEntries = () => {
allInputsValues = JSON.parse(localStorage.getItem("allInputs"));
}
Да, я только что пробовал, но все равно не работает :( Спасибо!
Я бы начал с массива идентификаторов
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)
}
Это будет сохранять значения в локальном хранилище каждый раз при изменении ввода.
Наконец, я набрал это в уме. Я сомневаюсь, что код можно скопировать. Вам нужно будет это исправить.
Для чего нужны идентификаторы?
Всего пара наблюдений. Возможно, я не понимаю вашего вопроса и не пытаюсь оскорбить ваш интеллект, написав основную информацию. по поводу местного строительства.
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 извлекается из локального хранилища, вы должны разбить его на части и записать каждую часть в соответствующую область на экране.
Объясните, пожалуйста, ваше значение
doesn't work