Локальное хранилище браузера. Работа с локальным хранилищем в 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 принципиальных методологии:
- Session storage.
- 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 в качестве контейнера, содержащего выводимые для пользователя сообщения, такие, допустим, как предупреждение о том, что он забыл ввести значение следующей записи, оставив поле ввода пустым.
В результате наша разметка должна иметь примерно такой вид:
Это вполне стандартный 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("
+ 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;
});
Поддержка браузеров.
В HTML5 спецификации предусмотрена достаточно мощная поддержка технологии Web Storage , благодаря чему она также реализована большинством популярных браузеров, даже IE8 . Единственной проблемой остается IE7 , если вас это все еще интересует.
Заключение.
В таких небольших приложениях механизм localStorage может вполне успешно заменить использование баз данных. Для хранения небольших объемов данных совсем не обязательно использовать более сложные альтернативы.
* Примечание переводчика.
Post Views: 475
Хранение данных непосредственно в браузере обладает множеством преимуществ, основное из которых это быстрый и независимый от сети доступ к “базе данных”. На данный момент есть 4 активных метода для этого (плюс один устаревший):
- Локальное хранилище
- Сессионное хранилище
- IndexedDB
- WebSQL (устаревшее)
Куки
Куки это классический способ хранения простых строчных данных внутри документа. Обычно куки отсылаются с сервера на клиент, который может сохранять их, а затем отправлять обратно на сервер в ответ на последующие запросы. Это может быть использовано для таких вещей, как управление сессиями аккаунта или отслеживание пользовательской информации.
Дополнительно куки можно использовать и для простого хранения данных на клиентской стороне. Поэтому они также часто используются для хранения общих данных типа пользовательских настроек.
Базовые CRUD-операции с куки
// Create document.cookie = "user_name=Ire Aderinokun"; document.cookie = "user_age=25;max-age=31536000;secure"; // Read (All) console.log(document.cookie); // Update document.cookie = "user_age=24;max-age=31536000;secure"; // Delete document.cookie = "user_name=Ire Aderinokun;expires=Thu, 01 Jan 1970 00:00:01 GMT";
Преимущества куки
- Их можно использовать для коммуникации с сервером
- Мы можем определить для куки срок их автоматического окончания вместо того, чтобы удалять вручную.
Недостатки куки
- Они добавляются к загрузке страницы документа
- Они могут хранить небольшое количество данных
- Они могут содержать только строки.
- Потенциальные проблемы с безопасностью.
- Это метод не рекомендуется для хранения данных на клиенте с момента появления Web Storage API (локальное и сессионное хранилище).
Поддержка в браузерах
У куки есть базовая поддержка во всех больших браузерах.
Локальное хранилище
Локальное хранилище это одна из разновидностей Web Storage API , специального API для хранения данных в браузере в формате ключ-значение. Этот API был создан как решение для проблем с куки и является более интуитивным и безопасным способом хранения простых данных внутри браузера.
Хотя технически мы можем хранить в локальном хранилище только строки, это обходится за счет преобразования в JSON. Таким образом мы можем сохранять в локальном хранилище более сложные данные по сравнению с куки.
Базовые CRUD-операции с локальным хранилищем
// Create const user = { name: "Ire Aderinokun", age: 25 } localStorage.setItem("user", JSON.stringify(user)); // Read (Single) console.log(JSON.parse(localStorage.getItem("user"))) // Update const updatedUser = { name: "Ire Aderinokun", age: 24 } localStorage.setItem("user", JSON.stringify(updatedUser)); // Delete localStorage.removeItem("user");
Преимущества локального хранилища
- Предлагает более простой и интуитивный интерфейс хранения данных.
- Более безопасно для хранения данных на клиенте.
- Позволяет хранить больше данных (все 3 пункта - в сравнении с куки).
Недостатки локального хранилища
- Позволяет хранить только строки
Поддержка в браузерах
Сессионное хранилище
Сессионное хранилище это вторая разновидность Web Storage API . Оно точно такое же как и локальное хранилище за исключением того, что данные хранятся только для сессии вкладки браузера. Как только пользователь уходит со страницы и закрывает браузер, данные очищаются.
Базовые CRUD-операции с сессионным хранилищем
// Create const user = { name: "Ire Aderinokun", age: 25 } sessionStorage.setItem("user", JSON.stringify(user)); // Read (Single) console.log(JSON.parse(sessionStorage.getItem("user"))) // Update const updatedUser = { name: "Ire Aderinokun", age: 24 } sessionStorage.setItem("user", JSON.stringify(updatedUser)); // Delete sessionStorage.removeItem("user");
Достоинства, недостатки и поддержка в браузерах точно такие же как и у локального хранилища.
IndexedDB
IndexedDB это намного более сложное и проработанное решение для хранения данных в браузере, так как это низкоуровневый API для хранения на клиенте значительного количества структурированных данных. По своей сути это объектно-ориентированная база данных, основанная на JavaScript, которая позволяет нам легко сохранять и извлекать данные, проиндексированные по ключу.
WebSQL
WebSQL это API для реляционной базы на клиенте, сходное с SQLite. С 2010 рабочая группа W3C прекратила работу над этой спецификацией и этот API больше не является частью спецификации HTML и не должен использоваться.