Javascript локальное хранилище. Работа с локальным хранилищем в JavaScript

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

JavaScript

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

$("#add").click(function() {
//если текстовое поле не заполнено
$("#alert").html("Внимание! Введите запись в текстовое
поле.");
return false;
}

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

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

// Добавляем запись в существующий список
$("#todos").prepend("

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

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

// если в локальном хранилище уже есть данные, то отображаем их

}

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

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

// Полная очиска localStorage
window.localStorage.clear();
location.reload();
return false;
});

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

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

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 может вполне успешно заменить использование баз данных. Для хранения небольших объемов данных совсем не обязательно использовать более сложные альтернативы.

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

Post Views: 475

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

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

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

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

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

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

HTML

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

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

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

  Clear All

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

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

  JavaScript

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

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

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

  // вставляем запись $("#todos").prepend("

  " + Description + "

  "); // удаляем все что осталось в текстовом поле $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); return false; });

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

  ). Этот код легко получить с помощью 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("Warning! You left the to-do empty"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; } $("#todos").prepend("

  • " + Description + "
  "); $("#form").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 и ниже.

  Заключение

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

  Создание приложения “список дел” (амер. to-do list), обычно, является первым приложением, которое вы делаете при изучении JavaScript, но проблема всех этих приложений является в том, что, когда вы перезагружаете страницу все эти списки исчезают.
  Существует простое решение - использование локального хранилища. Преимуществом локального хранилища является то, что вы можете сохранить биты данных на компьютере пользователя, и когда произошла перезагрузка страницы, все списки задач остались на месте.

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

  Локальное хранение данных является частью сети хранения, которое само по себе является частью спецификации HTML5. Есть два варианта для хранения данных в спецификации:

  • Локальное хранилище (Local Storage): хранит данные без даты окончания срока действия, и это тот вариант, который мы будем использовать, потому что мы хотим, чтобы наши списки оставались на странице как можно дольше.
  • Хранение сессии (Session Storage): только сохраняет данные в течение одной сессии, так что если пользователь закрывает вкладку и вновь открывает её, все его данные будут потеряны.

  Простыми словами, все, что веб хранилище делает, это сохраняет key/value пары с именем локально, и в отличие от cookies, эти данные сохраняются даже если вы закроете браузер или выключите компьютер.

  Если мы думаете о списке дел, то вам понадобится следующие:

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

  Таким образом, наш HTML должен выглядеть примерно так:

  Clear All

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

  Так как мы будем использовать JQuery в этом примере, вы также должны включить его в HTML документ.

  JavaScript

  Если мы подумаем о структуре простого “to-do list” приложения, то первое что нам нужно сделать, это проверить, имеет ли ввод пустое значениее, когда пользователь нажимает на кнопку “добавить” или “проверить”:

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

  Все, что мы сделали, это проверили клик по кнопке Добавить и запустили простой тест, чтобы проверить, если пользователь заполнил ввод чем-то. Если нет, то тогда предупреждение div всплывает и остается на 1000 мс, а затем исчезает.

  Следующее, что нам нужно сделать, это вставить элемент списка со значением в cтроку ввода, и мы предварим это так, что, когда пользователь добавляет задачу, она всегда будет идти в начало списка, а затем сохранять элемент списка в локальное хранилище, вот так:

  // add the list item $("#todos").prepend("

  " + Description + "

  "); // delete whatever is in the input $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); return false; });

  Как вы видите, это довольно стандартный jQuery и когда дело доходит до локального хранилища мы должны сохранить ключ и значение. Ключ представляет собой имя, которое мы себе задаем, в этом случае мы просто назовем его «Todos”, затем мы должны определить, что мы хотим сохранить, и в данном случае это весь HTML, что находится внутри Todos неупорядоченного списка. Как вы видите, мы все захватили с помощью jQuery, и наконец, вернули “ложные” (false) так, чтобы форма не сдавалась и наша страница не обновлялась.

  Наш следующий шаг, это проверить, есть ли у нас что-то сохраненное на локальном хранилище. Если есть, то тогда нам нужно разместить это на странице, учитывая то, что мы дали нашему ключу имя “todos”, нам нужно проверить его существование. Вот так:

  // if we have something on local storage place that if(localStorage.getItem("todos")) { $("#todos").html(localStorage.getItem("todos")); }

  Если вы протестируете наше приложение и перезагрузите страницу, то увидите, что она уже работает. Все, что нам остаеться сделать, это создать функцию, которая будет отвечать за очистку всего списка. Мы стираем все местные хранения, перезагружаем страницу, чтобы наше изменение вступило в силу, а затем возвращаем “false”, чтобы предотвратить хэш перед URL следующим образом:

  // clear all the local storage $("#clear").click(function() { window.localStorage.clear(); location.reload(); return false; });

  Полный код выглядит следующим образом:
  

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

  " + Description + "

  "); $("#form").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; });

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

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