ПОИСК

Как использовать локальное хранилище данных в JavaScript

Очень часто первым приложением на JavaScript бывает Todo-список, но проблема подобных приложений в том, что после обновления страницы все пункты списка пропадают.

Простое решение этой проблемы — использование локально хранилища (Local Storage). Локальное хранилище позволяет хранить данные на машине пользователя и вы легко сможете загрузить список из него после обновления страницы. В этой статье мы напишем небольшой todo-list с использованием локального хранилища.

Что такое локальное хранилище?

Локальное хранилище («веб-хранилище») изначально было частью спецификации HTML5, но сейчас вынесено в отдельную. Хранить данные можно двумя способами:

Local Storage: постоянное хранилище, именно его мы будем использовать.
Session Storage: хранит данные только данной сессии, если пользователь закроет страницу, данные будут потеряны.

Локальное хранилище позволяет хранить на компьютере пользователя данные в виде пар ключ-значение и эти данные будут доступны даже после закрытия браузера или выключения компьютера.

HTML

Для создания todo-списка нам понадобится:

Текстовый input для ввода содержимого элемента.
Кнопка добавления элемента в список.
Кнопка для очистки списка.
Сам список (<ul>).
И дополнительный div для показа ошибок.

Таким образом HTML разметка будет выглядеть так:

Код

 <section> <form id="form" action="#" method="POST"> <input id="description" name="description" type="text" /> <input id="add" type="submit" value="Add" /> <button id="clear">Clear All</button> </form> <div id="alert"></div> <ul id="todos"></ul> </section>

Довольно простая структура, которую мы оживим с помощью JavaScript.

Т.к. мы используем jQuery необходимо дополнительно подключить её.

JavaScript

Для начала нам необходимо отслеживать нажатие на кнопку добавления и проверять чтобы поле для ввода не было пустым:

Код

 $('#add').click( function() { var Description = $('#description').val(); if($("#description").val() == '') { $('#alert').html("<strong>Warning!</strong> You left the to-do empty"); $('#alert').fadeIn().delay(1000).fadeOut(); return false; }

Этот код проверяет значение текстового input’а и, если оно пусто — показывает ошибку и возвращает false, чтобы оставшаяся часть кода не выполнилась и элемент не добавился в список.

Далее нам надо добавить дело в список. Мы будем использовать метод prepend, т.о. элементы будут добавляться в начало списка. Затем весь список сохраняется в локальном хранилище:

Код

 // вставляем запись $('#todos').prepend("<li><input id='check' name='check' type='checkbox'/>" + Description + "</li>"); // удаляем все что осталось в текстовом поле $('#form')[0].reset(); var todos = $('#todos').html(); localStorage.setItem('todos', todos); return false; });

Для работы с локальным хранилищем необходимо предоставить ключ и соответствующее ему значение. В нашем случае назовем ключ ‘todos’, а значением будет весь HTML код, который содержится в списке (в теге <ul>). Этот код легко получить с помощью jQuery. И, наконец мы возвращаем false, чтобы предотвратить сабмит формы и не перезагружать страницу.

Следующий шаг — проверить локальное хранилище, если существует значение с ключом ‘todos’, то загрузить список из локального хранилища:

Код

 if (localStorage.getItem('todos')) { $('#todos').html(localStorage.getItem('todos')); }

Т.к. мы храним готовый HTML в хранилище, то мы просто вставляем этот код в список.

Наш todo-list почти готов, осталось только реализовать функцию очистки списка. Когда пользователь нажмет на кнопку будет удален весь список и локальное хранилище будет очищено:

Код

 $('#clear').click(function() { window.localStorage.clear(); location.reload(); return false; });

Готово! Полный код выглядит так:

Код

 $(document).ready(function() { $('#add').click(function() { var Description = $('#description').val(); if ($("#description").val() == '') { $('#alert').html("<strong>Warning!</strong> You left the to-do empty"); $('#alert').fadeIn().delay(1000).fadeOut(); return false; } $('#todos').prepend("<li><input id='check' name='check' type='checkbox'/>" + Description + "</li>"); $('#form')[0].reset(); var todos = $('#todos').html(); localStorage.setItem('todos', todos); return false; }); if (localStorage.getItem('todos')) { $('#todos').html(localStorage.getItem('todos')); } $('#clear').click(function() { window.localStorage.clear(); location.reload(); return false; }); });

Поддержка браузерами

Веб хранилище поддерживают все основные браузеры, даже IE8. Опасаться стоит только IE7 и ниже.

Заключение

Локальное хранилище в таких маленьких приложениях может стать отличной заменой базе данных. Хранение маленьких объемов информации не должно вызывать сложностей.

2705