Использование localStorage для нужд JavaScript.

Перевод статьи:  How to use local storage for JavaScript.
Автор:  Sara Vieira.

Знакомство с основами программирования языка JavaScript зачастую начинается с создания простейших приложений, таких, к примеру, как электронная записная книжка, используемая нами для записи дел и событий, о которых мы можем забыть. Но подобным приложениям свойственна одна проблема — после перезагрузки страницы, список всех оставленных ранее записей исчезает, то есть приложение возвращается в свое исходное состояние.

Существует очень простой выход из данной ситуации, предусматривающий использование механизма локального хранения localStorage. Благодаря тому, что localStorage позволяет нам сохранять необходимые данные на пользовательском компьютере, упомянутый выше список запланированных дел и событий будет все еще доступен после перезагрузки страницы, кроме того, localStorage является на удивление очень простым способом хранения данных и доступа к ним при необходимости.

Что такое localStorage?

Это механизм локального хранения данных, который является частью технологии Web Storage, предусмотренной HTML5 спецификацией. Имеется два варианта хранения данных, допустимые данной спецификацией:

  • Локальное хранение: позволяет сохранять информацию без ограничений по срокам хранения. Именно этот вариант мы и будем использовать, поскольку имеющийся в нашем примере список задач должен храниться постоянно.
  • Использование сеансов: обеспечивает сохранность данных лишь на период одного сеанса, то есть после закрытия пользователем вкладки нашего приложения и повторного ее открытия вся необходимая для дальнейшей работы приложения информация будет удалена.

Попросту говоря, все, что делает Web Storage, это хранит данные в форме именованный ключ/значение локально и в отличие от двух других методов, каждый из которых имеет свои недостатки (Сеансовое хранение информации предусматривает использование для этого серверной стороны, к тому же после закрытия сеанса пользователя эта информация удаляется, а cookies хотя и используют для хранения сторону клиента, но не надежны потому, что путем настроек браузера пользователь может отменить их поддержку.) сохраняет данные даже в том случае, если вы закрыли браузер или выключили свой компьютер. (*Я позволил себе несколько изменить и дополнить содержание этого абзаца, поскольку считаю, что в оригинале автор допустил неточности.)

HTML

Если придерживаться нашего примера, в котором мы хотим создать электронный вариант записной книжки, то ниже представлены все необходимые компоненты для ее реализации:

  • Поле для ввода новых записей (событий, дел и т.п.).
  • Кнопка для подтверждения введенной записи.
  • Кнопка для очистки уже созданного списка дел.
  • Неупорядоченный список, который будет пополняться элементами в виде новых записей.
  • И в заключение, нам нужен блок div в качестве контейнера, содержащего выводимые для пользователя сообщения, такие, допустим, как предупреждение о том, что он забыл ввести значение следующей записи, оставив поле ввода пустым.

В результате наша разметка должна иметь примерно такой вид:

<section>
<form id="form" action="#" method="POST">
<input id="description" name="description" type="text" />
<input id="add" type="submit" value="Добавить запись" />
<button id="clear">Очистить список</button>
</form>
<div id="alert"></div>
<ul id="todos"></ul>
</section>

Это вполне стандартный HTML шаблон, который мы можем заполнить динамически формируемым контентом с помощью JavaScript.

Поскольку далее в своем примере мы будем использовать jQuery, вам также необходимо будет подключить эту библиотеку в своей HTML разметке.

JavaScript

Применительно к структуре взятого в нашем примере простейшего приложения блокнота, первое, что нам необходимо сделать, это обеспечить отслеживание события нажатия кнопки «Добавить запись» и проверять, введена ли в текстовое поле для записи какая-нибудь информация, то есть в момент нажатия кнопки оно должно быть не пустым. Что-то на пример вот этого:

$('#add').click( function() {
var Description = $('#description').val();
//если текстовое поле не заполнено
if($("#description").val() == '') {
$('#alert').html("<strong>Внимание!</strong> Введите запись в текстовое
поле.");
$('#alert').fadeIn().delay(1000).fadeOut();
return false;
}

Вот что мы делаем с помощью этого фрагмента кода. При нажатии кнопки «Добавить запись» мы проверяем, ввел ли пользователь что-нибудь в поле для новой записи. Если он этого не сделал, то появляется предусмотренный нами для вывода сообщений div, информируя пользователя о том, что поле ввода записи не заполнено и затем, по истечении 1000ms (1 секунда) элемент div, а соответственно и сообщение, исчезает. Далее функция возвращает значение false, после чего браузер прекращает выполнение остальной части скрипта и приложение снова готово к вводу новой записи.

Следующим нашим шагом будет добавление в начало списка введенного в поле для записей значения путем генерации нового элемента списка. Таким образом, когда пользователь дописывает еще одну запись, то она всегда будет помещаться в начало списка намеченных дел и ожидаемых событий. После этого нам остается лишь сохранить список с помощью механизма localStorage:

// Добавляем запись в существующий список
$('#todos').prepend("<li>" + Description + "</li>");
// Очищаем поле ввода
$('#form')[0].reset();
var todos = $('#todos').html();
localStorage.setItem('todos', todos);
return false;
});

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

Теперь, допустим, наш пользователь ранее уже внес несколько записей и для дальнейшей нормальной работы приложения нам нужно проверить имеется ли в localStorage сохраненная прежде на компьютере информация и если да, то отобразить ее для пользователя. Поскольку имя нашего ключа 'todos', то мы должны проверить его существование следующим образом:

// если в локальном хранилище уже есть данные, то отображаем их
if(localStorage.getItem('todos')) {
$('#todos').html(localStorage.getItem('todos'));
}

Для проверки наличия данных мы использовали обычный if оператор и при выполнении указанного нами условия, просто извлекли из локального хранилища все данные, поместив их в качестве HTML разметки внутри неупорядоченного списка, с помощью которого отображаются введенные ранее пользователем записи.

Если вы проверите работу своего простейшего приложения, то обнаружите, что после перезагрузки страницы все остается на месте. И теперь, последнее, что нам остается сделать, так это создать функцию, с помощью которой пользователь при необходимости смог бы удалить все свои записи. Это реализуется путем очистки localStorage и перезагрузки страницы для активации сделанных изменений. Далее, мы, как и в предыдущем случае устанавливаем false в качестве возвратного значения функции, что предотвращает появление хэша в URL. (*и не прокручивает страницу вверх.):

// Полная очиска localStorage
$('#clear').click( function() {
window.localStorage.clear();
location.reload();
return false;
});

В результате имеем полностью функционирующее приложение. И собирая все приведенные выше фрагменты воедино, получаем полный код приложения:

$('#add').click( function() {
var Description = $('#description').val();
if($("#description").val() == '') {
$('#alert').html("<strong>Внимание!</strong> Введите запись в
текстовое поле.");
$('#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;
});

Поддержка браузеров.

В HTML5 спецификации предусмотрена достаточно мощная поддержка технологии Web Storage, благодаря чему она также реализована большинством популярных браузеров, даже IE8. Единственной проблемой остается IE7, если вас это все еще интересует.

Заключение.

В таких небольших приложениях механизм localStorage может вполне успешно заменить использование баз данных. Для хранения небольших объемов данных совсем не обязательно использовать более сложные альтернативы.

* Примечание переводчика.

Комментариев: 7 на Использование localStorage для нужд JavaScript.

  1. Очень понятно, спасибо!
    на Вашем примере воспользовался sessionStorage вместо localStorage.

  2. «а хром поддерживает localStorage? ибо cookie он не поддерживает ((( к сожалению»
    Что? Как это не поддерживает.
    Все поддерживает.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *