[ITEM 4] QUESTION: Як працювати з localStorage?

Об'єкт localStorage у JavaScript є частиною вебсховища браузера і дозволяє зберігати пари ключ-значення безпосередньо в браузері користувача для персистентного зберігання даних між сесіями. Головна особливість localStorage полягає в тому, що збережені дані залишаються доступними навіть після закриття вкладки, перезапуску браузера або вимкнення комп'ютера, поки користувач або скрипт явно їх не видалять.

Для запису даних у сховище використовується метод localStorage.setItem(key, value), де обидва аргументи обов'язково мають бути рядками. Щоб прочитати збережені дані, застосовується метод localStorage.getItem(key, value), який повертає рядок зі значенням або null, якщо вказаний ключ відсутній у базі. Видалення конкретного елемента здійснюється за допомогою методу localStorage.removeItem(key), а якщо потрібно повністю очистити все сховище для цього домену, використовується метод localStorage.clear(), який видаляє абсолютно всі збережені пари ключ-значення.

Найважливішою технічною особливістю localStorage є те, що він працює виключно з рядками. Якщо ви спробуєте записати в нього об'єкт, масив або булеве значення, JavaScript автоматично перетворить його на рядок "[object Object]", втративши всі вихідні дані. Щоб успішно зберігати складні структури даних, такі як масиви об'єктів або користувацькі налаштування, перед записом необхідно серіалізувати їх у формат JSON за допомогою методу JSON.stringify(data), а при читанні — назад десеріалізувати за допомогою JSON.parse(savedData).

Обсяг пам'яті localStorage зазвичай становить близько 5–10 мегабайт на один домен, чого з надлишком вистачає для текстових налаштувань, токенів авторизації та чорновиків постів. Усі операції зі сховищем відбуваються синхронно в головному потоці виконання, тому не варто зловживати збереженням занадто великих обсягів даних, щоб уникнути можливих затримок у відмальовуванні інтерфейсу.