Локальное хранилище браузера. Работа с локальным хранилищем в JavaScript. Базовые CRUD-операции с куки

Последнее обновление: 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

Из таких web приложений, как Google Wave, Gmail и т.п. мы видим, что кеширование данных на стороне клиента это хорошая идея для большинства веб-приложений. Подумайте сами, для мобильного интернета очень важен объем . Однотипные запросы в 70% случаях (я не делал никаких расчетов, просто выражать доводы в процентах гораздо солиднее) возвращают одни и те же данные. Кроме того кешировать можно не только данные, но и само приложение.

До сих пор наиболее популярным методом для локального хранения были cookie. Cookie - это пара ключ-значение, которые хранятся локально в текстовом файле (4KB или 20 пар ключ-значение максимум(IE) для одного домена). Кроме того cookie передаются на сервер при любом HTTP запросе на сервер, даже при AJAX. Закономерно, что в стандарте должны были появится средства для более практичного хранения данных в браузере.

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

Итак, хранилище на стороне клиента делится на 3 принципиальных методологии:

1. Session storage.
2. Local storage или Global Storage

Давайте подробнее рассмотрим каждую из них:

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.

Привет всем! В этой статье мы разберем, что такое 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

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

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

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