🆓 FREE PROJECT

🚖 Урок 4: LocalStorage — пам'ять браузера!

💾 Історія поїздок назавжди!

Закрив додаток — відкрив знову — а там історія всіх поїздок!

LocalStorage — це сейф у браузері, що зберігає дані назавжди!

💡

А ТИ ЗНАВ?

💾 LocalStorage може зберігати 5-10 MB даних!
🔐 Дані залишаються навіть після закриття браузера!

🧠

НОВЕ В ЦЬОМУ УРОЦІ!

💾 localStorage.setItem() — зберігаємо дані
📖 localStorage.getItem() — читаємо дані
🗑️ localStorage.removeItem() — видаляємо дані

🔐

LocalStorage — це сейф у браузері!

Уяви, що в кожному браузері є маленький сейф.

📥 setItem('ключ', 'значення') — кладеш щось у сейф з підписом
📤 getItem('ключ') — дістаєш за підписом
🗑️ removeItem('ключ') — викидаєш конкретну річ
💥 clear() — викидаєш ВСЕ з сейфу

І головне — сейф НЕ очищається при закритті браузера! 🔒

🆚 Чому не просто змінні?

❌ Звичайні змінні

let trips = [];

• Живуть тільки поки сторінка відкрита
• Перезавантажив — все пропало!
• Закрив вкладку — дані зникли

✅ localStorage

localStorage.setItem(...)

• Зберігається на диску браузера
• Перезавантажив — дані на місці!
• Закрив браузер — все збережено

📱 ЖИВИЙ ДОДАТОК

Історія поїздок зберігається!

9:41 🔋 100%

🚖 KOODI TAXI

📋 Історія поїздок

Поки що немає поїздок

👆 Додай поїздки, перезавантаж сторінку — вони залишаться!

🗄️

LocalStorage Visualizer

Дивись що зберігається в браузері!

💾 localStorage 0 items

Порожньо...

📦

JSON.stringify & JSON.parse

Як зберігати об'єкти та масиви?

📦 Об'єкт JavaScript

{
  from: "Хрещатик",
  to: "Аеропорт",
  price: 250
}

📝 Рядок для localStorage

'{"from":"Хрещатик",
 "to":"Аеропорт",
 "price":250}'

💡 Запам'ятай: localStorage зберігає тільки рядки! Для об'єктів використовуй JSON.

JSON.stringify(об'єкт)

📦 → 📝 Перетворює об'єкт JavaScript на текстовий рядок.
Використовуй ПЕРЕД збереженням в localStorage!

JSON.parse(рядок)

📝 → 📦 Перетворює текстовий рядок назад на об'єкт JavaScript.
Використовуй ПІСЛЯ читання з localStorage!

🤔 Чому це важливо?

localStorage працює як текстовий файл — він розуміє тільки рядки!

Якщо спробуєш зберегти об'єкт напряму:
localStorage.setItem('trip', {from: 'Київ'})
Отримаєш: "[object Object]" — марний текст! 😱

Тому завжди: stringify → зберегти → прочитати → parse

💾 setItem — зберігаємо дані

📥 setItem — як покласти речі в шафу з підписом!
Наклеюєш ярлик (ключ) і кладеш річ (значення).

Збережи дані в localStorage:

// Зберігаємо просте значення localStorage.setItem('username', 'Олексій'); // Зберігаємо масив поїздок const trips = [ { from: 'Хрещатик', to: 'Аеропорт', price: 250 }, { from: 'Вокзал', to: 'Центр', price: 80 } ]; // ⚠️ ВАЖЛИВО: Масив треба перетворити в рядок! localStorage.setItem('trips', JSON.stringify(trips));

🧪 localStorage зберігає дані...

💡 localStorage.setItem(key, value) — зберігає дані в браузері

💡 key — це як ім'я файлу: унікальний ідентифікатор (завжди рядок)

💡 value — значення, яке зберігаємо (УВАГА: завжди рядок!)

💡 JSON.stringify() — "упаковує" об'єкт/масив у текстовий рядок

⚠️ ТИПОВА ПОМИЛКА:
localStorage.setItem('trips', trips) — НЕ ПРАЦЮЄ!
Масив перетвориться на рядок "[object Object]"

✅ ПРАВИЛЬНО:
localStorage.setItem('trips', JSON.stringify(trips))

📊 ЛІМІТИ localStorage:
• Максимум 5-10 MB на домен
• Зберігає дані назавжди (поки не очистиш)
• Працює тільки в межах одного домену

📖 getItem — читаємо дані

📤 getItem — як знайти річ у шафі за ярликом!
Кажеш "дай мені те, що підписано 'trips'" — і отримуєш!

Читаємо дані з localStorage:

// Читаємо просте значення const username = localStorage.getItem('username'); console.log(username); // "Олексій" // Читаємо масив (треба розпарсити!) const tripsString = localStorage.getItem('trips'); const trips = JSON.parse(tripsString); // Якщо ключа немає — повертає null const notExist = localStorage.getItem('неіснуючий'); console.log(notExist); // null // Безпечне читання з дефолтним значенням const safeTrips = JSON.parse(localStorage.getItem('trips')) || [];

🧪 Щоб зберегти масив в localStorage треба...

💡 localStorage.getItem(key) — читає дані за ключем

💡 Повертає null — якщо ключа не існує (а не помилку!)

💡 JSON.parse() — "розпаковує" рядок назад в об'єкт/масив

💡 || [] — якщо null, використай порожній масив

🔄 ПАТЕРН "ЧИТАЙ БЕЗПЕЧНО":


                        const trips = JSON.parse(localStorage.getItem('trips')) || [];

Що тут відбувається:
1️⃣ getItem('trips') — читаємо рядок (або null)
2️⃣ JSON.parse(...) — перетворюємо в масив (або null → null)
3️⃣ || [] — якщо null, повертаємо порожній масив

⚠️ БЕЗ || [] БУДЕ ПОМИЛКА:
Якщо getItem поверне null, то JSON.parse(null) = null
І потім null.forEach() — ПОМИЛКА! 💥

🗑️ removeItem — видаляємо дані

🧹 removeItem — як викинути річ з шафи!
Знаєш ярлик — можеш видалити. Легко!

Повна логіка історії поїздок:

// Функція завантаження історії function loadHistory() { const trips = JSON.parse(localStorage.getItem('trips')) || []; const list = document.getElementById('tripList'); list.innerHTML = ''; trips.forEach(trip => { list.innerHTML += '<li>🚖 ' + trip.from + ' → ' + trip.to + '</li>'; }); } // Функція збереження поїздки function saveTrip(from, to, price) { const trips = JSON.parse(localStorage.getItem('trips')) || []; trips.push({ from, to, price }); localStorage.setItem('trips', JSON.stringify(trips)); loadHistory(); } // Очищення історії document.getElementById('clearHistory').addEventListener('click', function() { localStorage.removeItem('trips'); loadHistory(); }); loadHistory(); // Завантажити при старті

🧪 localStorage.getItem('неіснуючий') поверне...

💡 localStorage.removeItem(key) — видаляє конкретний ключ

💡 localStorage.clear() — видаляє ВСЕ з localStorage (обережно!)

💡 loadHistory() — викликаємо при старті і після кожної зміни

📋 ВСІ МЕТОДИ localStorage:

`setItem(key, value)`	— зберегти
`getItem(key)`	— прочитати
`removeItem(key)`	— видалити один
`clear()`	— видалити ВСЕ
`key(index)`	— отримати ключ за індексом
`length`	— кількість записів

🔄 АЛГОРИТМ РОБОТИ З ДАНИМИ:

📖 ЧИТАННЯ (loadHistory):
1. Прочитай з localStorage
2. Розпарси JSON (або [] якщо null)
3. Відобрази на сторінці

💾 ЗБЕРЕЖЕННЯ (saveTrip):
1. Прочитай поточні дані
2. Додай новий елемент (push)
3. Збережи назад (stringify)
4. Оновлення відображення (loadHistory)

🆚 localStorage vs sessionStorage:

localStorage — дані зберігаються НАЗАВЖДИ
sessionStorage — дані видаляються при закритті вкладки

Синтаксис однаковий, різниця тільки в часі життя!

▶️ Натисни RUN і перевір!

Додай поїздку, перезавантаж сторінку — історія залишиться!

🏆 Що ти вивчив:

✓ localStorage.setItem() — зберігати дані

✓ localStorage.getItem() — читати дані

✓ localStorage.removeItem() — видаляти дані

✓ JSON.stringify() / JSON.parse() — працювати з об'єктами

✅ Коли все працює:

Натисни "Готово" в редакторі!

⏱️ ~20 хв • Урок 4 з 8

Потрібна допомога?

💡 Підказка

🤖 AI-KOODI

index.html ✏️

style.css

app.js

1 2 3 4 5 6 7 8 9 10

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🚖 Koodi Taxi</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- =============================================
         🚖 ЗАВДАННЯ: Історія поїздок
         =============================================

         Створи інтерфейс для історії поїздок:
         ✅ div (history) — контейнер історії
         ✅ h2 — заголовок "📋 Історія поїздок"
         ✅ ul (tripList) — список поїздок
         ✅ button (addTrip) — "➕ Додати тестову поїздку"
         ✅ button (clearHistory) — "🗑️ Очистити історію"

         ⬇️ ПИШИ КОД НИЖЧЕ ⬇️
    -->

    <div id="app">
        <h1>🚖 Koodi Taxi</h1>

        <!-- Твій код тут -->

    </div>

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

/* =============================================
   🎨 СТИЛІ ДЛЯ KOODI TAXI
   =============================================
   Стилі готові! Фокус уроку — LocalStorage.
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: linear-gradient(135deg, #1A1A2E, #16213e);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#app {
    background: rgba(255, 213, 0, 0.1);
    padding: 40px;
    border-radius: 25px;
    border: 3px solid #FFD500;
    text-align: center;
    max-width: 420px;
    width: 100%;
}

h1 {
    color: #FFD500;
    font-size: 1.8em;
    margin-bottom: 25px;
}

#history {
    background: rgba(0,0,0,0.3);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: left;
}

#history h2 {
    color: #FFD500;
    font-size: 1.2em;
    margin-bottom: 15px;
}

#tripList {
    list-style: none;
    max-height: 200px;
    overflow-y: auto;
}

#tripList li {
    background: rgba(255,213,0,0.1);
    border: 2px solid rgba(255,213,0,0.3);
    border-radius: 10px;
    padding: 12px 15px;
    margin-bottom: 10px;
    color: #FFF;
    font-size: 0.95em;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

#tripList:empty::after {
    content: "Історія порожня...";
    color: #666;
    font-style: italic;
    display: block;
    text-align: center;
    padding: 20px;
}

button {
    width: 100%;
    padding: 15px;
    border: 3px solid #000;
    border-radius: 12px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
}

#addTrip {
    background: linear-gradient(135deg, #FFD500, #E5BF00);
    color: #000;
}

#clearHistory {
    background: linear-gradient(135deg, #FF4E99, #FF3385);
    color: #FFF;
}

button:hover {
    transform: scale(1.03);
    box-shadow: 0 5px 20px rgba(255,213,0,0.3);
}

// =============================================
// 🚖 KOODI TAXI — LocalStorage (Урок 4)
// =============================================
// Вивчаємо: сховище браузера, серіалізацію даних

// ─────────────────────────────────────────────
// 📦 КРОК 1: Знайди елементи
// ─────────────────────────────────────────────
// Використай document.getElementById() для:
// - tripList (ul для списку поїздок)
// - addTrip (кнопка додавання)
// - clearHistory (кнопка очищення)
//
// ⬇️ ПИШИ ТУТ:



// ─────────────────────────────────────────────
// 📖 КРОК 2: Функція loadHistory()
// ─────────────────────────────────────────────
// Створи функцію яка:
// 1. Читає 'trips' зі сховища браузера
// 2. Парсить дані або повертає []
// 3. Очищає tripList (innerHTML = '')
// 4. Для кожної поїздки додає <li> в список
//
// ПРИКЛАД (псевдокод):
// function loadHistory() {
//     читаємо 'trips' → парсимо JSON → або []
//     очищаємо tripList
//     для кожної поїздки → додаємо <li> в список
// }
//
// ⬇️ ПИШИ ТУТ:



// ─────────────────────────────────────────────
// 💾 КРОК 3: Функція saveTrip(from, to, price)
// ─────────────────────────────────────────────
// Створи функцію яка:
// 1. Читає поточні поїздки зі сховища
// 2. Додає нову поїздку в масив (push)
// 3. Зберігає оновлений масив (setItem + stringify)
// 4. Викликає loadHistory() для оновлення
//
// ПРИКЛАД (псевдокод):
// function saveTrip(from, to, price) {
//     читаємо масив поїздок зі сховища
//     додаємо нову поїздку (push)
//     зберігаємо назад (setItem + stringify)
//     оновлюємо список (loadHistory)
// }
//
// ⬇️ ПИШИ ТУТ:



// ─────────────────────────────────────────────
// 🖱️ КРОК 4: Обробник кнопки "Додати"
// ─────────────────────────────────────────────
// При кліку на addTrip:
// - Викликай saveTrip з тестовими даними
// - Наприклад: saveTrip('Хрещатик', 'Аеропорт', 250)
//
// ⬇️ ПИШИ ТУТ:



// ─────────────────────────────────────────────
// 🗑️ КРОК 5: Обробник кнопки "Очистити"
// ─────────────────────────────────────────────
// При кліку на clearHistory:
// 1. Видали 'trips' зі сховища
// 2. Виклич loadHistory() для оновлення
//
// ⬇️ ПИШИ ТУТ:



// ─────────────────────────────────────────────
// 🚀 КРОК 6: Завантаж історію при старті!
// ─────────────────────────────────────────────
// Просто виклич loadHistory() в кінці файлу
//
// ⬇️ ПИШИ ТУТ:



console.log('🚖 Koodi Taxi LocalStorage!');

16px

localhost/taxi.html

🚖

Напиши код і натисни Run ▶

Koodi Taxi