16 Як застосунок пам’ятає справи

Розмістимо «Мій день» за вебадресою й перевіримо збереження позначок; орієнтовний час — 35–45 хвилин. Потрібні сім файлів з уроку 15 та GitHub, налаштований в уроці 14. Публікуємо файли програми; позначки зберігаються в браузері й не змінюють файлів на GitHub.

Пам’ять відкритої сторінки зникає при перезавантаженні. Щоб повернути позначки, код записує їх у localStorage — невелике сховище даних сайту в браузері. Записи зберігаються між звичайними сеансами, але не синхронізуються між пристроями. Очищення даних сайту їх видалить. Для адрес file: поведінка не визначена однаково, тому готовий приклад вимикає там збереження. Перевірятимемо його за HTTPS. [B207]

На занятті

Викладач покаже той самий застосунок у двох браузерах. Разом простежимо, які позначки повертаються після закриття вкладки та чому інший браузер не бачить цих даних.

Отримайте вебадресу застосунку

1. Відкрийте https://github.com/new у своєму обліковому записі. Створіть репозиторій my-day: Public, Add README, Create repository. Це окремий проєкт; сайт personal-site залишиться на місці.
2. На вкладці Code відкрийте Add file → Upload files. Із локальної папки Documents\AI-practice\my-day перетягніть сім файлів, перелічених в уроці 15. Вони мають з’явитися у верхньому рівні; не завантажуйте зайву зовнішню папку.
3. Введіть повідомлення Add My Day app, виберіть прямий коміт у main, натисніть Commit changes. У Settings → Pages установіть Deploy from a branch, main, /(root), натисніть Save. [B205][B206]
4. Після розгортання відкрийте Visit site. Адреса закінчуватиметься на /my-day/. Збережіть її в закладках: для перевірок треба повертатися саме до цього застосунку, а не до локального файлу.

Простежте запис і читання

1. У звичайному, не приватному вікні натисніть Почати новий день, а потім позначте першу й третю справи. Очікуємо «Виконано 2 з 3» і повідомлення «Позначки збережено в цьому браузері».
2. Оновіть сторінку. Перша й третя позначки мають залишитися. Закрийте вкладку, відкрийте застосунок із закладки й перевірте ще раз.
3. Відкрийте ту саму адресу в іншому браузері, де ще не користувалися застосунком. Усі три справи будуть без позначок. Так ви побачите межу сховища: Edge і Chrome не ділять наші позначки між собою. На телефоні вони також почнуться окремо.

У готовому app.js знайдіть saveChoices. Це функція — названий фрагмент коду, який виконує одну роботу. Усередині є такі рядки JavaScript:

const done = boxes.map(box => box.checked);
localStorage.setItem(key, JSON.stringify(done));

Перший рядок збирає три значення: true означає «позначено», false — «не позначено». Другий перетворює список на JSON — текстовий запис значень — і зберігає його під іменем, що міститься в key. Для першої й третьої справи це текст [true,false,true]. При відкритті застосунок перетворює його назад на список і відновлює прапорці.

1. Натисніть Почати новий день, потім оновіть сторінку. Має залишитися «Виконано 0 з 3»: кнопка змінює і екран, і збережені значення. Позначте одну справу знову, щоб залишити видимий результат уроку.

Якщо власна генерація не зберігає дані

Надішліть ШІ повний app.js та цей вузький запит. Готовий приклад уже виконує описану поведінку.

Отриманий повний app.js збережіть замість старого в локальній папці. Перед перевіркою за HTTPS виконайте «Оновлення після встановлення» з уроку 17: змініть версію кешу в sw.js, збережіть його та завантажте обидва змінені файли одним комітом. Дочекайтеся розгортання й відкрийте нову версію за вказаним там порядком. Потім повторіть кроки 5–6. Цей порядок потрібний і для звичайної вкладки.

Практика вдома

1. Створіть Documents\AI-practice\storage-home.txt. Перед перевіркою передбачте, що буде з позначками після закриття всього браузера, а не лише вкладки.
2. У вже опублікованому застосунку почніть новий день і позначте тільки третю справу. Збережіть іншу відкриту роботу, закрийте браузер і знову відкрийте застосунок із закладки.
3. Запишіть прогноз і фактичні прапорці та число. Критерій успіху — повернулися саме третя позначка й 1. Поясніть одним реченням, чому інший телефон не зобов’язаний показати те саме.

Самотест

1. Збережено лише середню справу. Що має відновитися після оновлення і як виглядає список трьох значень?
2. Чому на іншому телефоні немає ваших позначок?
3. Чи можна вважати localStorage резервною копією важливих записів?

Терміни

• localStorage — сховище невеликих текстових даних сайту в браузері.
• JSON — текстовий формат для запису структурованих значень.
• Функція — фрагмент коду з іменем, який можна викликати для певної роботи.