Просте рішення цієї проблеми - використання локально сховища (Local Storage). Локальна пам'ять дозволяє зберігати дані на машині користувача і ви легко зможете завантажити список з нього після оновлення сторінки. У цій статті ми напишемо невеликий todo-list з використанням локального сховища.
Що таке локальне сховище?
Локальна пам'ять ( «веб-сховище») спочатку було частиною специфікації HTML5, але зараз винесено в окрему. Зберігати дані можна двома способами:
- Local Storage. постійне сховище, саме його ми будемо використовувати.
- Session Storage. зберігає дані тільки даної сесії, якщо користувач закриє сторінку, дані будуть втрачені.
Локальна пам'ять дозволяє зберігати на комп'ютері користувача дані у вигляді пар ключ-значення і ці дані будуть доступні навіть після закриття браузера або вимкнення комп'ютера.
Для створення todo-списку нам знадобиться:
- Текстовий input для введення вмісту елемента.
- Кнопка додавання елемента в список.
- Кнопка для очищення списку.
- Сам список (
- ).
- І додатковий div для показу помилок.
Таким чином HTML розмітка буде виглядати так:
Оскільки ми використовуємо jQuery необхідно додатково підключити її.
Для початку нам необхідно відстежувати натискання на кнопку додавання і перевіряти щоб поле для введення не було порожнім:
Цей код перевіряє значення текстового input'а і, якщо вона порожня - показує помилку і повертає false, щоб решта коди не виконалася і елемент не додався до списку.
Далі нам треба додати справа в список. Ми будемо використовувати метод prepend, таким чином елементи будуть додаватися в початок списку. Потім весь список зберігається в локальному сховищі:
Для роботи з локальним сховищем необхідно надати ключ і відповідне йому значення. У нашому випадку назвемо ключ 'todos', а значенням буде весь HTML код, який міститься в списку (в тезі
- ). Цей код легко отримати за допомогою jQuery. І, нарешті ми повертаємо false, щоб запобігти сабміт форми і не перезавантажувати сторінку.
- Інтерактивна завантаження файлів на HTML5 і jQuery
- Робимо аудіо плеєр за допомогою jQuery і jPlayer
- Створення кнопок зі вбудованим індикатором процесу
- Вибір кольору на зображенні за допомогою HTML5 Canvas
- Створюємо слайдер картинок за допомогою jQuery і CSS3
- Цифровий годинник за допомогою jQuery і CSS3
- Закладки на чистому CSS3
- Ефекти для анімації завантаження за допомогою CSS
Наступний крок - перевірити локальне сховище, якщо існує значення з ключем 'todos', то завантажити список з локального сховища:
Оскільки ми зберігаємо готовий HTML в сховище, то ми просто вставляємо цей код в список.
Наш todo-list майже готовий, залишилося тільки реалізувати функцію очищення списку. Коли користувач натисне на кнопку буде видалений весь список і локальне сховище буде очищено:
Готово! Повний код виглядає так:
підтримка браузерами
Веб сховище підтримують всі основні браузери, навіть IE8. Остерігатися варто тільки IE7 і нижче.
висновок
Локальна пам'ять в таких маленьких додатках може стати відмінною заміною базі даних. Зберігання маленьких обсягів інформації не повинно викликати труднощів.