Blog. Just Blog

Хранение данных в localStorage и sessionStorage

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Хранение данных в localStorage и sessionStorage
Хранение данных в localStorage и sessionStorage

Собрал небольшую шпаргалку по localStorage и sessionStorage в частности и Web Storage API в целом. Вся эта информация в том или ином объеме, конечно, есть в других источниках, тут она исключительно для личного удобства, чтобы долго не искать.

localStorage и sessionStorage - особые объекты хранилища, которые позволяют хранить достаточно большой объем данных в формате "ключ-значение" непосредственно в браузере. В базовых настройках браузера это обычно до 5 мегабайт информации на домен, при необходимости размер хранилища можно увеличить. Прелесть этих хранилищ заключается в том, что данные, которые сохранены в них, никуда не исчезают после обновления страницы и даже после перезапуска браузера, об этом будет написано чуть ниже. В зависимости от решаемой задачи, выбирается тот или иной тип хранилища.

Объект localStorage создается единым для всех вкладок и окон, но при этом уникален по связке "протокол + домен + порт". Это значит, что страницы, открытые на разных доменах или субдоменах, а также на разных портах или протоколах одного и того же домена, получают в свое распоряжение собственные объекты хранилища. Они не могут получить доступ к данным других объектов хранилищ, однако все вкладки и окна браузера, соответствующие связке уникальности, могут синхронизировано получать данные из своего хранилища. Информация в localStorage хранится до момента, пока она не будет удалена скриптом на соответствующей странице или пока пользователь не удалит их средствами браузера. Никаких иных ограничений по времени хранения у localStorage нет.

Объект sessionStorage создается только в контексте текущей вкладки браузера. Даже если открыть в соседней вкладке эту же страницу, доступа к хранилищу первой вкладки у нее не будет. Данные в sessionStorage сохраняются до момента закрытия вкладки. При перезагрузке страницы, например, во время серфинга по сайту, данные сохраняются. Если открыть закрытую вкладку, хранилище создается заново.

В остальном оба хранилища ничем друг от друга не отличаются. Для работы с localStorage и sessionStorage используются одинаковые методы:
  • setItem(key, value) - сохранить в хранилище пару "ключ-значение";
  • getItem(key) - получить значение, соответствующее ключу "key";
  • key(index) - получить название ключа из заданной позиции хранилища;
  • removeItem(key) - удалить данные, соответствующие ключу "key";
  • clear() - удалить все содержимое хранилища.
На всякий случай упомяну, что все следующие примеры кода работают как с localStorage, так и с sessionStorage.

Обращаться к данным можно точно так же, как и в случае обычного объекта. Например, следующие вызовы приведут к одинаковому результату:
  1. // Сохранить данные в хранилище
  2. localStorage.my_value 42;
  3. localStorage['my_value'] = 42;
  4. localStorage.setItem('my_value'42);
  5.  
  6. // Прочитать данные из хранилища
  7. my_value localStorage.saved;
  8. my_value localStorage['saved'];
  9. my_value localStorage.getItem('saved');
  10.  
  11. // Удалить запись из хранилища
  12. localStorage.removeItem('saved');
  13. delete localStorage.saved;
Несмотря на это, желательно все-таки пользоваться именно методами. Запросто может возникнуть ошибка с ключами, которую будет очень сложно найти.

Все значения в localStorage и sessionStorage хранятся только в виде строк, без вариантов. Например, если в хранилище записать число, то при чтении вернется оно же, но в виде строки.
  1. // Сохранить число в хранилище
  2. var my_numer 42;
  3. console.log(typeof my_numer);
  4. // number
  5. localStorage.setItem('answer'my_numer);
  6.  
  7. // Получить данные из хранилища
  8. my_answer localStorage.getItem('answer');
  9. console.log(my_answer);
  10. // 42
  11. console.log(typeof my_answer);
  12. // string
Соответственно, если есть необходимость хранить массивы или объекты, то они должны быть приведены к строковому значению.
  1. // Сохранить объект как строку
  2. var my_data = {id:123name:"Dima"};
  3. localStorage.setItem('saved'JSON.stringify(my_data));
  4.  
  5. // Получить данные из хранилища
  6. my_data JSON.parse(localStorage.getItem('saved'));
Количество записей в хранилище можно узнать по значению localStorage.length. Для получения всех записей в хранилище можно воспользоваться следующим кодом:
  1. var k;
  2. for (var i=0i<localStorage.lengthi++) {
  3.     k localStorage.key(i);
  4.     console.log(k+' = '+localStorage.getItem(k));
  5. }
При добавлении, удалении или изменении записей в localStorage возникает событие storage. У него есть несколько полезных свойств, все "только для чтения":
  • key - название ключа, в котором произошли изменения. Если был вызван метод clear(), то будет значение null;
  • newValue - новое значение. При удалении записи или очистке хранилища будет значение null;
  • oldValue - старое значение. Если запись только что добавлена, то тут будет значение null;
  • storageArea - объект хранилища, в котором произошли изменения;
  • url - адрес страницы, которая инициировала изменения.
Несколько важных замечаний. Событие выстреливает во всех окнах и вкладках, которым доступно данное хранилище, за исключением окна, которое это событие инициировало. То есть оно никогда не сработает для одной открытой вкладки и, соответственно, в принципе не будет работать для хранилища sessionStorage. Вроде есть информация, что в браузере IE это событие срабатывает и для текущей страницы, не проверял, но на всякий случай стоит иметь в виду. Также это событие не сработает, если значение записи меняется ровно на то же самое.
  1. // Установить обработчик событий хранилища
  2. window.addEventListener("storage", function(e) {
  3.     console.log(e);
  4. });
Таким образом при помощи события storage приложение, открытое в нескольких окнах или вкладках браузера, может обмениваться сообщениями между ними.

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

Никаких демонстрационных страничек тут не будет, так как это просто информация, а не решение конкретной задачи.

Поделиться ссылкой ВКонтакте
Просмотров: 236 | Комментариев: 0

Метки: JavaScript

Комментарии

Отзывы посетителей сайта о статье
Комментариeв нет

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

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.004 сек.) / Память: 4.5 Mb
Наверх