Local Storage

Вітаю знову.

У попередній лекції ти познайомився з формами та валідацією.

Форми збирають дані користувача.

Валідація перевіряє, чи ці дані мають сенс.

Дуже корисно.

Дуже відповідально.

Дуже в стилі: “будь ласка, не вводь banana як email.”

Сьогодні ми навчимо JavaScript дуже цікавої речі.

Памʼяті.

Не справжньої людської памʼяті.

JavaScript не запамʼятає твій день народження і не принесе торт.

Але він може запамʼятовувати маленькі шматочки даних у браузері.

Це називається local storage.

Local storage дозволяє JavaScript зберігати дані навіть після оновлення сторінки.

Це означає, що сторінка може памʼятати такі речі:

імʼя користувача;
вибір теми;
список завдань;
просте налаштування;
маленькі фрагменти даних з форми.

До local storage JavaScript забував усе після перезавантаження сторінки.

Після local storage JavaScript стає трохи менш забудькуватим.

Все ще хаотичним.

Але прогрес є.

Що Ти Вивчиш

У цій лекції ти вивчиш:

що таке local storage;
як зберігати дані через localStorage.setItem;
як читати дані через localStorage.getItem;
як видаляти дані через localStorage.removeItem;
як очистити весь local storage;
чому local storage зберігає рядки;
як зберігати обʼєкти та масиви через JSON.stringify;
як читати обʼєкти та масиви через JSON.parse;
як створити маленьке збереження імені;
як створити простий список завдань, який переживе refresh.

Наприкінці цієї лекції твоя JavaScript-сторінка зможе памʼятати прості дані.

Не все.

Не секрети.

Не паролі.

Але достатньо, щоб бути корисною.

Як маленький блокнот всередині браузера.

Що Таке Local Storage?

Local storage — це можливість браузера, яка дозволяє сайтам зберігати невеликі обсяги даних.

Дані залишаються в браузері навіть після:

оновлення сторінки;
закриття вкладки;
повторного відкриття браузера.

Приклад:

localStorage.setItem("name", "Viktor");

Це зберігає значення "Viktor" під ключем "name".

Пізніше ми можемо його прочитати:

const name = localStorage.getItem("name");

console.log(name);

Результат:

Viktor

Браузер запамʼятав значення.

Дуже приємно.

Дуже зручно.

Трохи магічно.

Але це все ще просто JavaScript.

Важливе Попередження

Не зберігай чутливі дані в local storage.

Не зберігай:

паролі;
токени, які ти не розумієш;
приватні документи;
банківську інформацію;
секретні API keys;
будь-що, від чого ти почав би пітніти, якби це хтось побачив.

Local storage — це не безпечне сховище.

Він корисний для простих даних.

Вибір теми?

Добре.

Список завдань?

Нормально.

Пароль?

Ні.

Абсолютно ні.

Безпека — це не декоративна рослина.

Вона має значення.

Створи Проєкт

Створи папку для цієї лекції:

mkdir javascript-lesson10
cd javascript-lesson10
touch index.html
touch script.js

Твій проєкт має виглядати так:

javascript-lesson10/
  index.html
  script.js

Відкрий папку в редакторі.

Сьогодні ми будемо зберігати дані в браузері.

Браузер зараз стане маленьким блокнотом.

Сподіваюсь, не надто безладним.

Напиши HTML

Відкрий index.html і додай:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Local Storage</title>
</head>
<body>
  <h1>Local Storage</h1>

  <button id="saveButton">Зберегти Імʼя</button>
  <button id="loadButton">Завантажити Імʼя</button>

  <p id="message">Ще нічого не завантажено.</p>

  <script src="script.js"></script>
</body>
</html>

Це дає нам:

кнопку збереження;
кнопку завантаження;
місце для повідомлення.

Просто.

Маленько.

Готово щось запамʼятати.

Що вже більше, ніж можна сказати про деякі браузери після 38 відкритих вкладок.

Збереження Даних через setItem

Відкрий script.js і додай:

const saveButton = document.getElementById("saveButton");
const loadButton = document.getElementById("loadButton");
const messageElement = document.getElementById("message");

function saveName() {
  localStorage.setItem("name", "Viktor");
  messageElement.textContent = "Імʼя збережено.";
}

saveButton.addEventListener("click", saveName);

Онови браузер.

Натисни Зберегти Імʼя.

Повідомлення має показати:

Імʼя збережено.

Цей рядок важливий:

localStorage.setItem("name", "Viktor");

Він означає:

Збережи значення "Viktor" під ключем "name".

Local storage працює з парами ключ-значення.

Ключ — це як етикетка.

Значення — це дані.

Як етикетка на шухляді й річ всередині шухляди.

Дуже організовано.

Підозріло організовано.

Читання Даних через getItem

Тепер додай цю функцію:

function loadName() {
  const savedName = localStorage.getItem("name");
  messageElement.textContent = `Збережене імʼя: ${savedName}`;
}

loadButton.addEventListener("click", loadName);

Тепер повний script.js виглядає так:

const saveButton = document.getElementById("saveButton");
const loadButton = document.getElementById("loadButton");
const messageElement = document.getElementById("message");

function saveName() {
  localStorage.setItem("name", "Viktor");
  messageElement.textContent = "Імʼя збережено.";
}

function loadName() {
  const savedName = localStorage.getItem("name");
  messageElement.textContent = `Збережене імʼя: ${savedName}`;
}

saveButton.addEventListener("click", saveName);
loadButton.addEventListener("click", loadName);

Натисни Зберегти Імʼя.

Онови сторінку.

Натисни Завантажити Імʼя.

Імʼя все ще там.

JavaScript його запамʼятав.

Сторінка оновилася.

Дані вижили.

Маленьке диво.

Без backend.

Без бази даних.

Просто браузер робить браузерні речі.

Що Якщо Даних Немає?

Якщо ти намагаєшся прочитати ключ, якого не існує, отримаєш null.

Приклад:

const savedAge = localStorage.getItem("age");

console.log(savedAge);

Результат:

null

null означає:

Тут нічого немає.

Тому краще перевіряти дані перед тим, як показувати їх користувачу.

Приклад:

function loadName() {
  const savedName = localStorage.getItem("name");

  if (savedName === null) {
    messageElement.textContent = "Імʼя ще не збережено.";
    return;
  }

  messageElement.textContent = `Збережене імʼя: ${savedName}`;
}

Тепер сторінка поводиться краще.

Якщо імені немає, вона це каже.

Дуже ввічливо.

Дуже цивілізовано.

На відміну від випадкових JavaScript-помилок опівночі.

Збереження Input-у Користувача

Записати "Viktor" прямо в коді добре для навчання.

Але зазвичай ми хочемо зберегти те, що вводить користувач.

Онови index.html:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Local Storage</title>
</head>
<body>
  <h1>Local Storage</h1>

  <label for="nameInput">Твоє імʼя:</label>
  <input id="nameInput" type="text" placeholder="Введи своє імʼя">

  <button id="saveButton">Зберегти Імʼя</button>
  <button id="loadButton">Завантажити Імʼя</button>
  <button id="removeButton">Видалити Імʼя</button>

  <p id="message">Ще нічого не завантажено.</p>

  <script src="script.js"></script>
</body>
</html>

Тепер онови script.js:

const nameInput = document.getElementById("nameInput");
const saveButton = document.getElementById("saveButton");
const loadButton = document.getElementById("loadButton");
const removeButton = document.getElementById("removeButton");
const messageElement = document.getElementById("message");

function saveName() {
  const name = nameInput.value.trim();

  if (name === "") {
    messageElement.textContent = "Спочатку введи імʼя.";
    return;
  }

  localStorage.setItem("name", name);
  messageElement.textContent = "Імʼя збережено.";
  nameInput.value = "";
}

function loadName() {
  const savedName = localStorage.getItem("name");

  if (savedName === null) {
    messageElement.textContent = "Імʼя ще не збережено.";
    return;
  }

  messageElement.textContent = `Збережене імʼя: ${savedName}`;
}

function removeName() {
  localStorage.removeItem("name");
  messageElement.textContent = "Імʼя видалено.";
}

saveButton.addEventListener("click", saveName);
loadButton.addEventListener("click", loadName);
removeButton.addEventListener("click", removeName);

Тепер користувач може ввести імʼя.

Зберегти його.

Оновити сторінку.

Завантажити знову.

Видалити.

Це справжнє використання local storage.

Маленьке.

Практичне.

Корисне.

Як кишеньковий блокнот, але з більшою кількістю фігурних дужок.

Видалення Даних через removeItem

Цей рядок видаляє один збережений елемент:

localStorage.removeItem("name");

Він видаляє значення, збережене під ключем "name".

Тільки цей елемент.

Не все.

Це корисно, коли користувач хоче скинути одне налаштування.

Приклад:

localStorage.removeItem("theme");
localStorage.removeItem("username");
localStorage.removeItem("draft");

Конкретно.

Контрольовано.

Без зайвого руйнування.

Дуже зріло.

Як для JavaScript.

Очищення Всього Local Storage

Є також:

localStorage.clear();

Це видаляє все, що збережено в local storage для цього сайту.

Все.

Усі ключі.

Усі значення.

Зникли.

Використовуй обережно.

Приклад:

function clearStorage() {
  localStorage.clear();
}

Це корисно для кнопок reset.

Але не використовуй це випадково.

Це цифровий еквівалент прибирання столу вогнеметом.

Ефективно.

Але агресивно.

Local Storage Зберігає Рядки

Важлива деталь.

Local storage зберігає значення як рядки.

Приклад:

localStorage.setItem("age", 33);

const age = localStorage.getItem("age");

console.log(age);
console.log(typeof age);

Результат:

33
string

Навіть якщо ми зберегли число, local storage повертає рядок.

Це має значення.

Якщо тобі потрібне число, перетвори його:

const age = Number(localStorage.getItem("age"));

JavaScript любить сюрпризи з типами.

Тримай очі відкритими.

І, можливо, одну брову піднятою.

Збереження Обʼєктів

Local storage не може напряму зберігати обʼєкти.

Це не працює так, як ти хочеш:

const user = {
  name: "Viktor",
  role: "Student"
};

localStorage.setItem("user", user);

Результат стане приблизно таким:

[object Object]

Дуже некорисно.

Дуже JavaScript.

Щоб зберегти обʼєкт, перетвори його в рядок через JSON.stringify.

Приклад:

const user = {
  name: "Viktor",
  role: "Student"
};

localStorage.setItem("user", JSON.stringify(user));

Тепер обʼєкт збережений як JSON-рядок.

JSON — це текстовий формат для даних.

Він схожий на JavaScript-обʼєкти.

Але це текст.

Маленька різниця.

Велике значення.

Читання Обʼєктів

Щоб прочитати обʼєкт назад, використовуй JSON.parse.

Приклад:

const savedUser = localStorage.getItem("user");
const user = JSON.parse(savedUser);

console.log(user.name);
console.log(user.role);

Результат:

Viktor
Student

Повний приклад:

const user = {
  name: "Viktor",
  role: "Student"
};

localStorage.setItem("user", JSON.stringify(user));

const savedUser = localStorage.getItem("user");
const parsedUser = JSON.parse(savedUser);

console.log(parsedUser);

Шаблон такий:

JSON.stringify(data)

коли зберігаємо.

JSON.parse(data)

коли читаємо.

Stringify, щоб зберегти.

Parse, щоб використати.

Просто.

Потужно.

Трохи церемоніально.

Збереження Масивів

Масиви також потребують JSON.stringify.

Приклад:

const tasks = ["Вчити JavaScript", "Практикувати DOM", "Випити каву"];

localStorage.setItem("tasks", JSON.stringify(tasks));

Щоб їх прочитати:

const savedTasks = localStorage.getItem("tasks");
const tasks = JSON.parse(savedTasks);

console.log(tasks);

Результат:

["Вчити JavaScript", "Практикувати DOM", "Випити каву"]

Це дуже корисно.

Бо багато застосунків зберігають списки.

Завдання.

Товари.

Улюблене.

Налаштування.

Маленькі списки речей, які важливі користувачу.

Іноді списки речей, які користувач все одно забуде.

Але браузер памʼятає.

Створи Список Завдань, Який Зберігається

Тепер створимо маленький список завдань, який переживе refresh.

Онови index.html:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Local Storage</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    .card {
      background-color: white;
      padding: 24px;
      border: 2px solid #e5e7eb;
      border-radius: 18px;
    }

    h1 {
      font-size: 42px;
    }

    input {
      width: 100%;
      margin-top: 8px;
      padding: 12px;
      border: 2px solid #d1d5db;
      border-radius: 12px;
      font-size: 18px;
      box-sizing: border-box;
    }

    button {
      margin-top: 14px;
      background-color: #2563eb;
      color: white;
      border: none;
      padding: 12px 18px;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover {
      background-color: #1d4ed8;
    }

    ul {
      padding-left: 24px;
      margin-top: 20px;
    }

    li {
      font-size: 20px;
      margin-bottom: 10px;
    }

    .message {
      margin-top: 16px;
      font-size: 18px;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <h1>Local Storage</h1>

  <div class="card">
    <label for="taskInput">Нове завдання</label>
    <input id="taskInput" type="text" placeholder="Введи завдання">

    <button id="addTaskButton">Додати Завдання</button>
    <button id="clearTasksButton">Очистити Завдання</button>

    <p id="message" class="message">Завдання зʼявляться нижче.</p>

    <ul id="taskList"></ul>
  </div>

  <script src="script.js"></script>
</body>
</html>

Тепер онови script.js:

const taskInput = document.getElementById("taskInput");
const addTaskButton = document.getElementById("addTaskButton");
const clearTasksButton = document.getElementById("clearTasksButton");
const taskListElement = document.getElementById("taskList");
const messageElement = document.getElementById("message");

let tasks = [];

function saveTasks() {
  localStorage.setItem("tasks", JSON.stringify(tasks));
}

function loadTasks() {
  const savedTasks = localStorage.getItem("tasks");

  if (savedTasks !== null) {
    tasks = JSON.parse(savedTasks);
  }
}

function showTasks() {
  taskListElement.innerHTML = "";

  for (const task of tasks) {
    const listItem = document.createElement("li");
    listItem.textContent = task;
    taskListElement.appendChild(listItem);
  }

  if (tasks.length === 0) {
    messageElement.textContent = "Завдань поки немає.";
  } else {
    messageElement.textContent = `У тебе ${tasks.length} завдання/завдань.`;
  }
}

function addTask() {
  const task = taskInput.value.trim();

  if (task === "") {
    messageElement.textContent = "Спочатку введи завдання.";
    return;
  }

  tasks.push(task);
  saveTasks();
  showTasks();

  taskInput.value = "";
}

function clearTasks() {
  tasks = [];
  saveTasks();
  showTasks();
}

addTaskButton.addEventListener("click", addTask);
clearTasksButton.addEventListener("click", clearTasks);

loadTasks();
showTasks();

Тепер протестуй.

Додай завдання.

Онови сторінку.

Завдання залишиться.

Додай ще одне завдання.

Онови знову.

Воно все ще там.

Вітаю.

Ти створив маленький застосунок з памʼяттю.

Без backend.

Без бази даних.

Тільки local storage.

Маленька frontend-магія.

Дуже приємно.

Як Працює Цей Код

Цей масив зберігає завдання в JavaScript:

let tasks = [];

Ця функція зберігає завдання в local storage:

function saveTasks() {
  localStorage.setItem("tasks", JSON.stringify(tasks));
}

Ця функція завантажує завдання з local storage:

function loadTasks() {
  const savedTasks = localStorage.getItem("tasks");

  if (savedTasks !== null) {
    tasks = JSON.parse(savedTasks);
  }
}

Ця функція показує завдання на сторінці:

function showTasks() {
  taskListElement.innerHTML = "";

  for (const task of tasks) {
    const listItem = document.createElement("li");
    listItem.textContent = task;
    taskListElement.appendChild(listItem);
  }
}

Це додає завдання:

tasks.push(task);
saveTasks();
showTasks();

Важливий шаблон:

Онови дані.

Збережи дані.

Покажи дані.

Цей шаблон є всюди.

Навіть у більших застосунках.

Тільки з більшою кількістю файлів.

Більшою кількістю фреймворків.

І більшими емоційними пошкодженнями.

Типові Помилки

Забути JSON.stringify

Неправильно:

localStorage.setItem("tasks", tasks);

Правильно:

localStorage.setItem("tasks", JSON.stringify(tasks));

Масиви й обʼєкти треба перетворювати на рядки перед збереженням.

Інакше JavaScript стає дивним.

Ще дивнішим, ніж зазвичай.

Забути JSON.parse

Неправильно:

const tasks = localStorage.getItem("tasks");

Правильно:

const tasks = JSON.parse(localStorage.getItem("tasks"));

Якщо ти зберіг JSON, зроби parse при читанні.

Stringify при збереженні.

Parse при завантаженні.

Як пакувати й розпаковувати валізу.

Намагатися Зберегти Чутливі Дані

Погана ідея:

localStorage.setItem("password", password);

Не роби цього.

Паролі не належать local storage.

Local storage — це не сейф.

Це більше як шухляда у твоїй кімнаті.

Корисно.

Але не місце для золотих злитків.

Забути Оновити Сторінку Після Збереження

Якщо ти тільки збережеш завдання:

tasks.push(task);
saveTasks();

але не викличеш:

showTasks();

дані збережені, але сторінка не оновлюється.

Браузер не читає думки.

Скажи йому, що показати.

Практика

Створи маленьку сторінку, яка зберігає улюблений колір.

Сторінка має мати:

input;
кнопку збереження;
кнопку завантаження;
місце для повідомлення.

Коли користувач зберігає колір, запиши його в local storage.

Коли користувач завантажує колір, покажи:

Твій улюблений колір — blue.

Бонус:

Зміни фон сторінки на цей колір.

Обережно з кольорами.

Якщо користувач введе “pizza”, браузер може не зрозуміти.

Хоча духовно pizza завжди правильний вибір.

Мінічелендж

Створи застосунок для нотаток.

Сторінка має мати:

textarea;
кнопку збереження;
кнопку завантаження;
кнопку очищення.

Правила:

збережи нотатку в local storage;
завантаж нотатку після refresh;
очисти нотатку, коли користувач натисне clear;
показуй повідомлення після кожної дії.

Це дуже практичний челендж.

Багато реальних застосунків починаються з цієї ідеї:

Користувач щось пише.

Застосунок це зберігає.

Користувач повертається пізніше.

Дані все ще там.

Просто.

Корисно.

Потужно.

Підсумок

Сьогодні ти вивчив:

local storage зберігає дані в браузері;
дані переживають refresh;
localStorage.setItem зберігає дані;
localStorage.getItem читає дані;
localStorage.removeItem видаляє один елемент;
localStorage.clear видаляє все;
local storage зберігає рядки;
числа можуть потребувати перетворення;
обʼєкти й масиви потребують JSON.stringify;
збережений JSON потребує JSON.parse;
local storage корисний для простих даних;
local storage не для паролів чи секретів.

Це величезний крок.

Твої сторінки тепер можуть памʼятати речі.

Маленькі речі.

Корисні речі.

Браузерні речі.

JavaScript отримав маленьку памʼять.

Дуже корисну.

Дуже небезпечну, якщо використовувати неправильно.

Як дати блокнот єноту.

Наступна Лекція

У наступній лекції ми вивчимо Fetch API.

Fetch дозволяє JavaScript отримувати дані з інших місць.

API.

Серверів.

JSON-файлів.

Реальних даних із зовнішнього світу.

До цього більшість даних жила всередині нашого коду.

Скоро JavaScript почне говорити з інтернетом.

Обережно.

Сподіваюсь.