Работа с локальным хранилищем в JavaScript. Как использовать локальное хранилище данных в JavaScript Браузерное хранилище
Очень часто первым приложением на JavaScript бывает Todo-список, но проблема подобных приложений в том, что после обновления страницы все пункты списка пропадают.
Простое решение этой проблемы - использование локально хранилища (Local Storage). Локальное хранилище позволяет хранить данные на машине пользователя и вы легко сможете загрузить список из него после обновления страницы. В этой статье мы напишем небольшой todo-list с использованием локального хранилища.
Что такое локальное хранилище?
Локальное хранилище («веб-хранилище») изначально было частью спецификации HTML5, но сейчас вынесено в отдельную. Хранить данные можно двумя способами:
- Local Storage : постоянное хранилище, именно его мы будем использовать.
- Session Storage : хранит данные только данной сессии, если пользователь закроет страницу, данные будут потеряны.
Локальное хранилище позволяет хранить на компьютере пользователя данные в виде пар ключ-значение и эти данные будут доступны даже после закрытия браузера или выключения компьютера.
HTML
Для создания todo-списка нам понадобится:
- Текстовый input для ввода содержимого элемента.
- Кнопка добавления элемента в список.
- Кнопка для очистки списка.
- Сам список (
- ).
- И дополнительный div для показа ошибок.
Таким образом HTML разметка будет выглядеть так:
Довольно простая структура, которую мы оживим с помощью 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("
Для работы с локальным хранилищем необходимо предоставить ключ и соответствующее ему значение. В нашем случае назовем ключ ‘todos’, а значением будет весь HTML код, который содержится в списке (в теге
- ). Этот код легко получить с помощью jQuery. И, наконец мы возвращаем false, чтобы предотвратить сабмит формы и не перезагружать страницу.
- " + 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; }); });
- Локальное хранение: позволяет сохранять информацию без ограничений по срокам хранения. Именно этот вариант мы и будем использовать, поскольку имеющийся в нашем примере список задач должен храниться постоянно.
- Использование сеансов: обеспечивает сохранность данных лишь на период одного сеанса, то есть после закрытия пользователем вкладки нашего приложения и повторного ее открытия вся необходимая для дальнейшей работы приложения информация будет удалена.
- Поле для ввода новых записей (событий, дел и т.п.).
- Кнопка для подтверждения введенной записи.
- Кнопка для очистки уже созданного списка дел.
- Неупорядоченный список, который будет пополняться элементами в виде новых записей.
- И в заключение, нам нужен блок div в качестве контейнера, содержащего выводимые для пользователя сообщения, такие, допустим, как предупреждение о том, что он забыл ввести значение следующей записи, оставив поле ввода пустым.
- " + Description + " ");
- "
+ Description + " "); - Session storage.
- Local storage или Global Storage
Следующий шаг - проверить локальное хранилище, если существует значение с ключом ‘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("
Поддержка браузерами
Веб хранилище поддерживают все основные браузеры, даже IE8. Опасаться стоит только IE7 и ниже.
Заключение
Локальное хранилище в таких маленьких приложениях может стать отличной заменой базе данных. Хранение маленьких объемов информации не должно вызывать сложностей.
Последнее обновление: 1.11.2015
Хотя куки позволяют сохранять информацию, они имеют ряд ограничений. Например, браузер имеет ограничения на размер куков - каждая кука не может превышать 4 кб. Куки имеют срок действия, после которого удаляются. Куки являются неотъемлемой чертой протокола HTTP и при каждом запросе к серверу передаются вместе с запросом на сервер. Однако для работы с куками на стороне клиента в коде javascript не имеет значения передача куков на сервер. Кроме того, для извлечения сохраненных куков надо написать некоторую порцию кода.
Поэтому в HTML5 была внедрена новая концепция для хранения данных - web storage . Web storage состоит из двух компонентов: session storage и local storage .
Session storage представляет временное хранилище информации, которая удаляется после закрытия браузера.
Local storage представляет хранилище для данных на постоянной основе. Данные из local storage автоматически не удаляются и не имеют срока действия. Эти данные не передаются на сервер в запросе HTTP. Кроме того, объем local storage составляет в Chrome и Firefox 5 Mб для домена, а в IE - 10 Mб.
Все данные в web storage представляют набор пар ключ-значение. То есть каждый объект имеет уникальное имя-ключ и определенное значение.
Для работы с local storage в javascript используется объект localStorage , а для работы с session storage - объект sessionStorage .
Для сохранения данных надо передать в метод setItem() объекта localStorage:
LocalStorage.setItem("login", "[email protected]");
В этот метод передаются два значения: ключ и значение сохраняемого объекта.
Если в localStorage уже есть объект с ключом "login", то его значение заменяется новым.
Для получения сохраненных данных надо вызвать метод getItem() :
Var login = localStorage.getItem("login"); //[email protected]
В этот метод передается ключ объекта.
Чтобы удалить объект, применяется метод removeItem() , который принимает ключ удаляемого объекта:
LocalStorage.removeItem("login");
И для полного удаления всех объектов из localStorage можно использовать метод clear() :
LocalStorage.clear();
С сохранением простых объектов все просто, однако при этом надо учитывать, что данные в localStorage сохраняются в виде строки:
LocalStorage.setItem("age", 23); var age = localStorage.getItem("age"); age=parseInt(age)+10; document.write(age); //33
Если в данном случае не преобразовать значение к числу с помощью parseInt() , то age будет действовать как строка.
Трудности могут возникнуть с сохранением сложных объектов:
Var user ={ name: "Tom", age: 23, married: false }; localStorage.setItem("user", user); var savedUser = localStorage.getItem("user"); document.write(savedUser); // document.write(savedUser.name); // undefined - savedUser - строка, а не объект
В этом случае нам надо использовать сериализацию в формат JSON:
Var user ={ name: "Tom", age: 23, married: false }; localStorage.setItem("user", JSON.stringify(user)); var savedUser = JSON.parse(localStorage.getItem("user")); document.write(savedUser.name + " " + savedUser.age +" " + savedUser.married); // Tom 23 false
Привет всем! В этой статье мы разберем, что такое localStorage и как его использовать .
Введение
LocalStorage - локальное хранилище. Т.е. это специально отведенное место в браузере(что-то вроде небольшой базы данных), где мы можем записывать, читать и удалять какие-то данные. На самом деле, локальное хранилище очень похоже на COOKIE , но есть отличия. Вот давайте о них и поговорим. Cookie очень ограничены. В одной cookie может быть всего 4096 символов, а их количество на один домен примерно 30-50 в зависимости от браузера. В локальном хранилище мы можем хранить 5-10мб или даже больше на длительное время.
Где их использовать
Самое большое отличие cookie от localStorage - это то, что первый работает с сервером, а второй нет, хотя это тоже можно сделать, но об этом немного позже. Используйте локальное хранилище там, где вам не нужна тесная работа с сервером, а нужно хранить какие-то временные данные. К примеру, представим, что вы создаете какое-то web-приложение, куда человек может зайти, ввести несколько задач, которые он хочет сделать за день и удалить те, которые уже выполнил. Зачем нам тут сервер? Правильно, не за чем. Вот тут и стоит использовать localStorage . Человек заходит, вводит задачи, они записываются в специальное место его браузера и там хранятся. Когда человек зайдет снова через какое-то время, они будут оттуда выбраны и показаны. К примеру, кликнув по задаче, она будет удаляться с локального хранилища и, следовательно, показываться ему уже не будет. Перейдем к тому, как его использовать.
Как использовать localStorage
Хранятся данные также, как и в cookie - ключ:значение . Чтобы добавить новое значение, напишите так:
LocalStorage.setItem("ключ", "значение");
Мы используем объект localStorage и его метод setItem , куда передаем ключ и значение.
Чтобы получить данные, пишем следующее:
Var value = localStorage.getItem("ключ");
В результате, в переменную value попадет значение, которое хранится под ключом, который мы передаем в метод getItem .
Удаляем данные
LocalStorage("ключ"); // удалит данные под переданным ключом
localStorage.clear(); // полностью очистит локальное хранилище
Чтобы проверить, не переполнено ли локальное хранилище, вы можете использовать константу QUOTA_EXCEEDED_ERR
Try {
localStorage.setItem("ключ", "значение");
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert("Превышен лимит");
}
}
Вот и все, что следует знать про localStorage . Стоит сказать, что помимо этого объекта есть еще один - sessionStorage . Отличается он только тем, что хранит данные только для одной вкладки, и они будут удалены, как только пользователь закроет вкладку.
В начале статьи я говорил, что локальное хранилище создано для того, чтобы хранить локальные данные и не общаться с сервером, но, однако, такая возможность у нас все же есть. Думаю, некоторые уже могли догадаться, как это сделать. Итак, если вам нужно отправить какие-то данные на сервер, то сделайте следующее: получите данные из локального хранилища, преобразуйте их в JSON строку и отправьте с помощью технологии Ajax . Так же можно их и принимать от сервера.
Итог
Итак, используйте localStorage там, где вам не нужно общаться с сервером, а нужно хранить данные локально, в браузере у пользователя. Все, что вам для этого нужно, мы рассмотрели в этой статье. Спасибо за внимание и до скорого!
Перевод статьи:
How to use local storage for JavaScript.
Sara Vieira.
Знакомство с основами программирования языка JavaScript зачастую начинается с создания простейших приложений, таких, к примеру, как электронная записная книжка, используемая нами для записи дел и событий, о которых мы можем забыть. Но подобным приложениям свойственна одна проблема — после перезагрузки страницы, список всех оставленных ранее записей исчезает, то есть приложение возвращается в свое исходное состояние.
Существует очень простой выход из данной ситуации, предусматривающий использование механизма локального хранения localStorage . Благодаря тому, что localStorage позволяет нам сохранять необходимые данные на пользовательском компьютере, упомянутый выше список запланированных дел и событий будет все еще доступен после перезагрузки страницы, кроме того, localStorage является на удивление очень простым способом хранения данных и доступа к ним при необходимости.
Что такое localStorage?
Это механизм локального хранения данных, который является частью технологии Web Storage , предусмотренной HTML5 спецификацией. Имеется два варианта хранения данных, допустимые данной спецификацией:
Попросту говоря, все, что делает Web Storage , это хранит данные в форме именованный ключ/значение локально и в отличие от двух других методов, каждый из которых имеет свои недостатки (Сеансовое хранение информации предусматривает использование для этого серверной стороны, к тому же после закрытия сеанса пользователя эта информация удаляется, а cookies хотя и используют для хранения сторону клиента, но не надежны потому, что путем настроек браузера пользователь может отменить их поддержку.) сохраняет данные даже в том случае, если вы закрыли браузер или выключили свой компьютер. (*Я позволил себе несколько изменить и дополнить содержание этого абзаца, поскольку считаю, что в оригинале автор допустил неточности. )
HTML
Если придерживаться нашего примера, в котором мы хотим создать электронный вариант записной книжки, то ниже представлены все необходимые компоненты для ее реализации:
В результате наша разметка должна иметь примерно такой вид:
Это вполне стандартный HTML шаблон, который мы можем заполнить динамически формируемым контентом с помощью JavaScript .
JavaScript
Применительно к структуре взятого в нашем примере простейшего приложения блокнота, первое, что нам необходимо сделать, это обеспечить отслеживание события нажатия кнопки «Добавить запись» и проверять, введена ли в текстовое поле для записи какая-нибудь информация, то есть в момент нажатия кнопки оно должно быть не пустым. Что-то на пример вот этого:
$("#add").click(function() {
//если текстовое поле не заполнено
$("#alert").html("Внимание! Введите запись в текстовое
поле.");
return false;
}
Вот что мы делаем с помощью этого фрагмента кода. При нажатии кнопки «Добавить запись» мы проверяем, ввел ли пользователь что-нибудь в поле для новой записи. Если он этого не сделал, то появляется предусмотренный нами для вывода сообщений div , информируя пользователя о том, что поле ввода записи не заполнено и затем, по истечении 1000ms (1 секунда) элемент div , а соответственно и сообщение, исчезает. Далее функция возвращает значение false , после чего браузер прекращает выполнение остальной части скрипта и приложение снова готово к вводу новой записи.
Следующим нашим шагом будет добавление в начало списка введенного в поле для записей значения путем генерации нового элемента списка. Таким образом, когда пользователь дописывает еще одну запись, то она всегда будет помещаться в начало списка намеченных дел и ожидаемых событий. После этого нам остается лишь сохранить список с помощью механизма localStorage :
// Добавляем запись в существующий список
$("#todos").prepend("
// Очищаем поле ввода
$("#form").reset();
return false;
});
Как вы, возможно, заметили, здесь нет ничего необычного, используется стандартный вариант 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("
$("#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;
});
Поддержка браузеров.
В HTML5 спецификации предусмотрена достаточно мощная поддержка технологии Web Storage , благодаря чему она также реализована большинством популярных браузеров, даже IE8 . Единственной проблемой остается IE7 , если вас это все еще интересует.
Заключение.
В таких небольших приложениях механизм localStorage может вполне успешно заменить использование баз данных. Для хранения небольших объемов данных совсем не обязательно использовать более сложные альтернативы.
* Примечание переводчика.
Post Views: 475
Из таких web приложений, как Google Wave, Gmail и т.п. мы видим, что кеширование данных на стороне клиента это хорошая идея для большинства веб-приложений. Подумайте сами, для мобильного интернета очень важен объем . Однотипные запросы в 70% случаях (я не делал никаких расчетов, просто выражать доводы в процентах гораздо солиднее) возвращают одни и те же данные. Кроме того кешировать можно не только данные, но и само приложение.
До сих пор наиболее популярным методом для локального хранения были cookie. Cookie - это пара ключ-значение, которые хранятся локально в текстовом файле (4KB или 20 пар ключ-значение максимум(IE) для одного домена). Кроме того cookie передаются на сервер при любом HTTP запросе на сервер, даже при AJAX. Закономерно, что в стандарте должны были появится средства для более практичного хранения данных в браузере.
Из всей спецификации HTML5 , локальные хранилища данных на стороне клиента, вероятно, одна из самых обсуждаемых тем. Есть как положительные, так и отрицательные мнения. Из минусов, самый весомый это нарушение концепции актуальности данных для всех пользователей, т.е. так, как это работает сейчас: пользователь заходит на сайт и видит последнюю версию веб-приложения, ту которую видят и все остальные пользователи. Однако при верном применении локальных хранилищ и своевременного обновления данных, этих проблем можно избежать.
Итак, хранилище на стороне клиента делится на 3 принципиальных методологии:
Давайте подробнее рассмотрим каждую из них:
1. Session Storage - сессионное хранилище
Сессионное хранилище более удобно, чем cookie. С различными реализациями макс. лимит может быть порядка нескольких Мбит. В отличии от cookie сессионные данные не отправляются при каждом запросе.
Преимущества: при запросе полезная нагрузка минимальна.
Приведем пример сессионного хранилища:
SessionStorage.setItem("userName", "taranfx"); // определяем сессионную переменную alert("Вас зовут: " + sessionStorage.getItem("userName"));// проверка доступа alert("Привет " + sessionStorage.userName); // другой метод доступа к сессионной переменной sessionStorage.removeItem("userName"); // в конце удаляем переменную
2. Local Storage
- локальное хранилище
LocalStorage JavaScript объект функционально идентичен sessionStorage объекту. Они отличаются только продолжительностью жизни и областью видимости. Область видимости: данные в localStorage доступны через все окна браузера в то время, как sessionStorage данные ограничивается окном в котором были созданы.
Глобальное хранилище памяти задается браузером, веб-сайты могут использовать его для хранения постоянных данных, которые не должны быть отправлены на сервер. Данные доступны по JavaScript и Flash. Это может быть очень удобно для Flash-игр.
GlobalStorage[""].foo = "bar"; // foo будет доступен на любом веб-сайте globalStorage["ru"].foo1 = "bar1"; // foo1 будут доступны на сайтах "..foo2 = "bar2"; // foo2 будет доступен только на сайт
При локальном хранении данных, спецификация была переписана в более безопасную сторону. Т.е. теперь данные автоматически привязываются к домену.
Продолжительность действия: при хранении в Local Storage данные сохраняются даже после закрытия вкладки/окна/браузера.
Вот как это можно сделать:
LocalStorage.setItem("userName", "taranfx"); // определяем переменную в localStorage alert("Вас зовут: " + localStorage.getItem("userName")); // доступ к ней alert("Привет " + localStorage.userName); // доступ к ней по другому localStorage.removeItem("userName"); // в конце удаляем ее
3. Database Storage - хранение в базе данных
До сих пор мы обсуждали хранилища ограниченные парами ключ-значение. Но когда вы имеете дело с большими объемами данных, лучше базы данных еще ничего не придумали. Браузеры использует SQLite базы, которая работает без дополнительных процессов и серверов. Лишь с небольшими ограничениями, к примеру отсутствие внешнего ключа.
Но в награду вы получаете полноценную SQL базу данных. И работа с ней ведется на SQL.