
Хранение данных в 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() - удалить все содержимое хранилища.
Обращаться к данным можно точно так же, как и в случае обычного объекта. Например, следующие вызовы приведут к одинаковому результату:
Code (JavaScript) : Убрать нумерацию
- // Сохранить данные в хранилище
- localStorage.my_value = 42;
- localStorage['my_value'] = 42;
- localStorage.setItem('my_value', 42);
- // Прочитать данные из хранилища
- my_value = localStorage.saved;
- my_value = localStorage['saved'];
- my_value = localStorage.getItem('saved');
- // Удалить запись из хранилища
- localStorage.removeItem('saved');
- delete localStorage.saved;
Все значения в localStorage и sessionStorage хранятся только в виде строк, без вариантов. Например, если в хранилище записать число, то при чтении вернется оно же, но в виде строки.
Code (JavaScript) : Убрать нумерацию
- // Сохранить число в хранилище
- var my_numer = 42;
- console.log(typeof my_numer);
- // number
- localStorage.setItem('answer', my_numer);
- // Получить данные из хранилища
- my_answer = localStorage.getItem('answer');
- console.log(my_answer);
- // 42
- console.log(typeof my_answer);
- // string
Code (JavaScript) : Убрать нумерацию
- // Сохранить объект как строку
- var my_data = {id:123, name:"Dima"};
- localStorage.setItem('saved', JSON.stringify(my_data));
- // Получить данные из хранилища
- my_data = JSON.parse(localStorage.getItem('saved'));
Code (JavaScript) : Убрать нумерацию
- var k;
- for (var i=0; i<localStorage.length; i++) {
- k = localStorage.key(i);
- console.log(k+' = '+localStorage.getItem(k));
- }
- key - название ключа, в котором произошли изменения. Если был вызван метод clear(), то будет значение null;
- newValue - новое значение. При удалении записи или очистке хранилища будет значение null;
- oldValue - старое значение. Если запись только что добавлена, то тут будет значение null;
- storageArea - объект хранилища, в котором произошли изменения;
- url - адрес страницы, которая инициировала изменения.
Code (JavaScript) : Убрать нумерацию
- // Установить обработчик событий хранилища
- window.addEventListener("storage", function(e) {
- console.log(e);
- });
При всем удобстве локальных хранилищ, у них есть существенный недостаток в плане безопасности. Вредоносный код, внедренный на страницу, будет также иметь доступ ко всем данным хранилища, которое к этой странице относится. Поэтому никакой чувствительной информации в localStorage и sessionStorage лучше не хранить.
Никаких демонстрационных страничек тут не будет, так как это просто информация, а не решение конкретной задачи.
Просмотров: 534 | Комментариев: 0
Метки: JavaScript

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

Добавить комментарий
Заполните форму для добавления комментария
