> }
> // Берём список из локального хранилища
> var notes = JSON.parse(localStorage.getItem("notes")) ||
> {"что купить": ""};
> for (var name in notes)
> if (notes.hasOwnProperty(name))
> addToList(name);
> function saveToStorage() {
> localStorage.setItem("notes", JSON.stringify(notes));
> }
> var current = document.querySelector("#currentnote");
> current.value = notes[list.value];
> list.addEventListener("change", function() {
> current.value = notes[list.value];
> });
> current.addEventListener("change", function() {
> notes[list.value] = current.value;
> saveToStorage();
> });
> function addNote() {
> var name = prompt("Имя записи", "");
> if (!name) return;
> if (!notes.hasOwnProperty(name)) {
> notes[name] = "";
> addToList(name);
> saveToStorage();
> }
> list.value = name;
> current.value = notes[name];
> }
>
Скрипт инициализирует переменную >notes значением из >localStorage, а если его там нет – простым объектом с одной записью «что купить». Попытка прочесть отсутствующее поле из >localStorage вернёт >null. Передав >null в >JSON.parse, мы получим >null обратно. Поэтому для значения по умолчанию можно использовать оператор >||.
Когда данные в >note меняются (добавляется новая запись или меняется текущая), для обновления хранимого поля вызывается функция >saveToStorage. Если б мы рассчитывали, что у нас будут храниться тысячи записей, это было бы слишком накладно, и нам пришлось бы придумать более сложную процедуру для хранения – например, своё поле для каждой записи.
Когда пользователь добавляет запись, код должен обновить текстовое поле, хотя у поля и есть обработчик >“change”. Это нужно потому, что событие >“change” происходит, только когда пользователь меняет значение поля, а не когда это делает скрипт.
Есть ещё один похожий на >localStorage объект под названием >sessionStorage. Разница между ними в том, что содержимое >sessionStorage забывается по окончанию сессии, что для большинства браузеров означает момент закрытия.
HTML предоставляет множество различных типов полей формы – текстовые, галочки, множественного выбора, выбора файла.
Из JavaScript можно получать значение и манипулировать этими полями. По изменению они запускают событие >“change”, по вводу с клавиатуры – >“input”, и ещё много разных клавиатурных событий. Они помогают нам отловить момент, когда пользователь взаимодействует с полем ввода. Свойства вроде >value (для текстовых полей и >select) или >checked (для галочек и радиокнопок) используются для чтения и записи содержимого полей.