Сохранение списка

Добавьте товар и снова нажмите «Запустить». Товара больше нет: когда страница открывается, её скрипт начинается с начала, и список снова загружается из файла. В настоящем браузере то же самое случалось бы при каждом закрытии или перезагрузке страницы. Список покупок, который забывает, что вы в него записали, мало полезен, поэтому в этом упражнении он научится запоминать.

Как вы знаете из урока «Данные с сервера», страница может хранить данные в браузере, в localStorage, и они остаются там, даже когда страницу закрывают. localStorage хранит только текст, поэтому массив кладётся туда в виде JSON: JSON.stringify() превращает его в текст, а JSON.parse() превращает текст обратно в массив объектов. Список сохраняется под ключом "items":

// Сохраняет список в браузере
function saveItems() {
    localStorage.setItem("items", JSON.stringify(items));
}

Список нужно сохранять каждый раз, когда он меняется. Пока это происходит в двух местах: в обработчике кнопки «Добавить», который добавляет товар, и в обработчике каждого товара, который вычёркивает его. Вызывайте saveItems() в обоих, сразу после изменения.

Когда страница открывается, loadItems() сначала ищет сохранённый список. localStorage.getItem() возвращает null, если под этим ключом ещё ничего не сохранено, например при первом открытии страницы. Если сохранённый список есть, функция показывает его и завершается командой return, поэтому файл загружается, только если ничего не сохранено:

const saved = localStorage.getItem("items");
if (saved !== null) {
    items = JSON.parse(saved);
    showItems();
    return;
}

Окно просмотра хранит то, что страница сохраняет, пока вы работаете над упражнением. Как только что-нибудь сохранено, в консоли появляется кнопка Очистить сохранённые данные, которая открывает страницу заново, как в первый раз, когда ничего не сохранено.

Типичные ошибки:

• Сохранить массив без JSON.stringify(). Тогда в localStorage окажется текст [object Object],[object Object], а при открытии страницы JSON.parse() завершится ошибкой SyntaxError. Исправьте код и нажмите «Очистить сохранённые данные», чтобы страница перестала загружать испорченный текст.
• Разные ключи в setItem() и getItem(), например "items" и "list". Тогда страница никогда не найдёт то, что сохранила.