Session storage что это

Local Storage vs. Session Storage vs. Cookie

Начинающие разработчики часто заглядывают в справочники, чтобы найти разницу между локальным (Local Storage) и сессионным хранилищем (Session Storage) и cookie. Эта короткая статья поможет вам разобраться с вопросом.

• Local Storage (локальное хранилище)
• Session Storage (сессионное хранилище)
• Cookie

Local Storage (локальное хранилище)

• Хранит данные бессрочно.
• Очищается только с помощью JavaScript или очистки кэша браузера.
• Хранит данные объёмом до 5 МБ, это самый большой объём из трёх вариантов хранилища.
• Не поддерживается старыми браузерами, например, IE 7 и ниже.
• Работает по правилу ограничения домена (same origin policy). То есть сохранённые данные доступны только для одного источника.

Session Storage (сессионное хранилище)

• Хранит данные, пока продолжается текущая сессия. Когда пользователь закрывает браузер, данные становятся недоступными.
• Используется контекст браузера верхнего уровня, поэтому каждая вкладка браузера хранит уникальные данные.
• Объём данных больше чем в Cookie.
• Не поддерживается старыми браузерами, например, IE 7 и ниже.

Cookie

• Хранит данные, которые можно передавать на сервер через заголовки.
• Локальное и сессионное хранилище доступны только на клиентской стороне.
• Срок хранения устанавливается при создании cookie.
• Объём данных не превышает 4 Кбайт.
• Cookie могут быть защищёнными, в этом случае их содержимое нельзя получить на стороне клиента. Это важно для аутентификации при хранении пользовательских токенов.

Адаптированный перевод статьи Local Storage vs Session Storage vs Cookie Storage by Paulund.

Фронтенд-разработчик — с нуля до трудоустройства за 10 месяцев

• Постоянная поддержка от наставника и учебного центра
• Помощь с трудоустройством
• Готовое портфолио к концу обучения
• Практика с первого урока

Вы получите именно те инструменты и навыки, которые позволят вам найти работу

LocalStorage, sessionStorage

Объекты веб-хранилища localStorage и sessionStorage позволяют хранить пары ключ/значение в браузере.

Что в них важно – данные, которые в них записаны, сохраняются после обновления страницы (в случае sessionStorage ) и даже после перезапуска браузера (при использовании localStorage ). Скоро мы это увидим.

Но ведь у нас уже есть куки. Зачем тогда эти объекты?

• В отличие от куки, объекты веб-хранилища не отправляются на сервер при каждом запросе. Именно поэтому мы можем хранить гораздо больше данных. Большинство современных браузеров могут выделить как минимум 5 мегабайтов данных (или больше), и этот размер можно поменять в настройках.
• Ещё одно отличие от куки – сервер не может манипулировать объектами хранилища через HTTP-заголовки. Всё делается при помощи JavaScript.
• Хранилище привязано к источнику (домен/протокол/порт). Это значит, что разные протоколы или поддомены определяют разные объекты хранилища, и они не могут получить доступ к данным друг друга.

Объекты хранилища localStorage и sessionStorage предоставляют одинаковые методы и свойства:

• setItem(key, value) – сохранить пару ключ/значение.
• getItem(key) – получить данные по ключу key .
• removeItem(key) – удалить данные с ключом key .
• clear() – удалить всё.
• key(index) – получить ключ на заданной позиции.
• length – количество элементов в хранилище.

Как видим, интерфейс похож на Map ( setItem/getItem/removeItem ), но также позволяет получить доступ к элементу по индексу – key(index) .

Давайте посмотрим, как это работает.

Демо localStorage

Основные особенности localStorage :

• Этот объект один на все вкладки и окна в рамках источника (один и тот же домен/протокол/порт).
• Данные не имеют срока давности, по которому истекают и удаляются. Сохраняются после перезапуска браузера и даже ОС.

Например, если запустить этот код…

localStorage.setItem('test', 1);

…И закрыть/открыть браузер или открыть ту же страницу в другом окне, то можно получить данные следующим образом:

alert( localStorage.getItem('test') ); // 1

Нам достаточно находиться на том же источнике (домен/протокол/порт), при этом URL-путь может быть разным.

Объект localStorage доступен всем окнам из одного источника, поэтому, если мы устанавливаем данные в одном окне, изменения становятся видимыми в другом.

Доступ как к обычному объекту

Также можно получать/записывать данные, как в обычный объект:

// установить значение для ключа localStorage.test = 2; // получить значение по ключу alert( localStorage.test ); // 2 // удалить ключ delete localStorage.test;

Это возможно по историческим причинам и, как правило, работает, но обычно не рекомендуется, потому что:

Если ключ генерируется пользователем, то он может быть каким угодно, включая length или toString или другой встроенный метод localStorage . В этом случае getItem/setItem сработают нормально, а вот чтение/запись как свойства объекта не пройдут:

let key = 'length'; localStorage[key] = 5; // Ошибка, невозможно установить length

Перебор ключей

Методы, которые мы видим, позволяют читать/писать/удалять данные. А как получить все значения или ключи?

К сожалению, объекты веб-хранилища нельзя перебрать в цикле, они не итерируемы.

Но можно пройти по ним, как по обычным массивам:

for(let i=0; i: $`); >

Другой способ – использовать цикл, как по обычному объекту for key in localStorage .

Здесь перебираются ключи, но вместе с этим выводятся несколько встроенных полей, которые нам не нужны:

// bad try for(let key in localStorage) < alert(key); // покажет getItem, setItem и другие встроенные свойства >

…Поэтому нам нужно либо отфильтровать поля из прототипа проверкой hasOwnProperty :

for(let key in localStorage) < if (!localStorage.hasOwnProperty(key)) < continue; // пропустит такие ключи, как "setItem", "getItem" и так далее >alert(`$: $`); >

…Либо просто получить «собственные» ключи с помощью Object.keys, а затем при необходимости вывести их при помощи цикла:

let keys = Object.keys(localStorage); for(let key of keys) < alert(`$: $`); >

Последнее работает, потому что Object.keys возвращает только ключи, принадлежащие объекту, игнорируя прототип.

Только строки

Обратите внимание, что ключ и значение должны быть строками.

Если мы используем любой другой тип, например число или объект, то он автоматически преобразуется в строку:

localStorage.user = ; alert(localStorage.user); // [object Object]

Мы можем использовать JSON для хранения объектов:

localStorage.user = JSON.stringify(); // немного позже let user = JSON.parse( localStorage.user ); alert( user.name ); // John

Также возможно привести к строке весь объект хранилища, например для отладки:

// для JSON.stringify добавлены параметры форматирования, чтобы объект выглядел лучше alert( JSON.stringify(localStorage, null, 2) );

sessionStorage

Объект sessionStorage используется гораздо реже, чем localStorage .

Свойства и методы такие же, но есть существенные ограничения:

• sessionStorage существует только в рамках текущей вкладки браузера.
  • Другая вкладка с той же страницей будет иметь другое хранилище.
  • Но оно разделяется между ифреймами на той же вкладке (при условии, что они из одного и того же источника).

  Давайте посмотрим на это в действии.

  Запустите этот код…

  sessionStorage.setItem('test', 1);

  …И обновите страницу. Вы всё ещё можете получить данные:

  alert( sessionStorage.getItem('test') ); // после обновления: 1

  …Но если вы откроете ту же страницу в другой вкладке и попробуете получить данные снова, то код выше вернёт null , что значит «ничего не найдено».

  Так получилось, потому что sessionStorage привязан не только к источнику, но и к вкладке браузера. Поэтому sessionStorage используется нечасто.

  Событие storage

  Когда обновляются данные в localStorage или sessionStorage , генерируется событие storage со следующими свойствами:

  • key – ключ, который обновился ( null , если вызван .clear() ).
  • oldValue – старое значение ( null , если ключ добавлен впервые).
  • newValue – новое значение ( null , если ключ был удалён).
  • url – url документа, где произошло обновление.
  • storageArea – объект localStorage или sessionStorage , где произошло обновление.

  Важно: событие срабатывает на всех остальных объектах window , где доступно хранилище, кроме того окна, которое его вызвало.

  Представьте, что у вас есть два окна с одним и тем же сайтом. Хранилище localStorage разделяется между ними.

  Вы можете открыть эту страницу в двух окнах браузера, чтобы проверить приведённый ниже код.

  Теперь, если оба окна слушают window.onstorage , то каждое из них будет реагировать на обновления, произошедшие в другом окне.

  // срабатывает при обновлениях, сделанных в том же хранилище из других документов window.onstorage = event => < // можно также использовать window.addEventListener('storage', event =>< if (event.key != 'now') return; alert(event.key + ':' + event.newValue + " at " + event.url); >; localStorage.setItem('now', Date.now());

  Обратите внимание, что событие также содержит: event.url – url-адрес документа, в котором данные обновились.

  Также event.storageArea содержит объект хранилища – событие одно и то же для sessionStorage и localStorage , поэтому event.storageArea ссылается на то хранилище, которое было изменено. Мы можем захотеть что-то записать в ответ на изменения.

  Это позволяет разным окнам одного источника обмениваться сообщениями.

  Современные браузеры также поддерживают Broadcast channel API специальный API для связи между окнами одного источника, он более полнофункциональный, но менее поддерживаемый. Существуют библиотеки (полифилы), которые эмулируют это API на основе localStorage и делают его доступным везде.

  Итого

  Объекты веб-хранилища localStorage и sessionStorage позволяют хранить пары ключ/значение в браузере.

  • key и value должны быть строками.
  • Лимит 5 Мб+, зависит от браузера.
  • Данные не имеют «времени истечения».
  • Данные привязаны к источнику (домен/протокол/порт).
  • setItem(key, value) – сохранить пару ключ/значение.
  • getItem(key) – получить данные по ключу key .
  • removeItem(key) – удалить значение по ключу key .
  • clear() – удалить всё.
  • key(index) – получить ключ на заданной позиции.
  • length – количество элементов в хранилище.
  • Используйте Object.keys для получения всех ключей.
  • Можно обращаться к ключам как к обычным свойствам объекта, в этом случае событие storage не срабатывает.
  • Срабатывает при вызове setItem , removeItem , clear .
  • Содержит все данные об произошедшем обновлении ( key/oldValue/newValue ), url документа и объект хранилища storageArea .
  • Срабатывает на всех объектах window , которые имеют доступ к хранилищу, кроме того, где оно было сгенерировано (внутри вкладки для sessionStorage , глобально для localStorage ).

  Задачи

  Автосохранение поля формы

  Создайте поле textarea , значение которого будет автоматически сохраняться при каждом его изменении.

  Когда пользователь закроет страницу и потом откроет её заново он должен увидеть последнее введённое значение.

  Window.sessionStorage

  Свойство sessionStorage позволяет получить доступ к объекту Storage текущей сессии. Свойство sessionStorage очень похоже на свойство Window.localStorage , единственное различие заключается в том, что все данные, сохранённые в localStorage не имеют определённого времени жизни, а данные в sessionStorage очищаются в момент окончания сессии текущий страницы. Сессия страницы остаётся активной все время пока окно браузера открыто и сохраняется между перезагрузками страниц. Открытие той же страницы в новом окне браузера или новой вкладке приводит к созданию новой сессии страницы, что отличается от поведения session cookies**.**

  Синтаксис

  // Сохранение данных в sessionStorage sessionStorage.setItem("key", "value"); // Получение данных из sessionStorage var data = sessionStorage.getItem("key"); 

  Значение

  Пример

  Следующий код получает доступ к объекту Storage текущей сессии домена и добавляет данные в него используя Storage.setItem() .

  .setItem("myCat", "Tom"); 

  Следующий пример автоматически сохраняет содержимое текстового поля. Если страница случайно будет обновлена значение текстового поля будет восстановлено. Таким образом ничего из введённого пользователем не потеряется даже в этом случае.

  // Получаем ссылку на текстовое поле, // изменение которого будем отслеживать. var field = document.getElementById("field"); // Проверяем наличие значения 'autosave' // (это может произойти только если страница будет случайно обновлена) if (sessionStorage.getItem("autosave"))  // Восстанавливаем содержимое текстового поля field.value = sessionStorage.getItem("autosave"); > // Отслеживаем все изменения в текстовом поле field.addEventListener("change", function ()  // И сохраняем их в объект session storage sessionStorage.setItem("autosave", field.value); >); 

  Примечание: Обратитесь к статье Using the Web Storage API, чтобы изучить полный пример.

  Спецификации

  Specification
  HTML Standard # dom-sessionstorage-dev

  Поддержка браузерами

  BCD tables only load in the browser

  Смотрите также

  • Using the Web Storage API
  • Window.localStorage

  Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

  This page was last modified on 3 авг. 2023 г. by MDN contributors.

  Your blueprint for a better internet.

  MDN

  Support

  • Product help
  • Report an issue

  Our communities

  Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

  Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
  Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

  Веб хранилище (API)

  Web Storage API предоставляет механизмы, при помощи которых браузеры могут безопасно хранить пары ключ/значение в более интуитивно понятной манере, чем куки (cookies).

  Основы Веб хранилища и его использование

  В основе Веб хранилища лежат два механизма:

  • хранилище сессии (sessionStorage) обслуживает область хранения данных для каждого домена, доступное на протяжении сессии. (пока браузер открыт, даже в случае перезагрузки страницы)
  • локальное хранилище (localStorage) делает то же самое, но сохраняет данные даже в случае, если переоткрыть браузер.

  Обе функции доступны через Window.sessionStorage и Window.localStorage свойства (если быть более точным, в браузерах, поддерживающих хранилища объект Window выполняет объекты WindowLocalStorage и WindowSessionStorage , которые содержат свойства localStorage и sessionStorage ) — вызов одного из них создаёт представление объекта Storage , через который можно устанавливать, редактировать и удалять данные. Для каждого из типа хранилищ и по каждому домену используется отдельное представление Storage объекта — они функционируют и управляются отдельно друг от друга.

  Примечание: Начиная с версии 45 Firefox, когда браузер прекращает работу/перезагружается, объем данных, сохранённых для каждого источника, ограничивается 10 МБ. Это было сделано, чтобы избежать проблем с памятью, вызванных чрезмерным использованием веб-хранилища.

  Примечание: Доступ к веб хранилищу из iFrame третьей стороны запрещён, если пользователь отключил cookies третьих сторон (Firefox ведёт себя так с версии 43).

  Примечание: Web Storage это не тоже самое, что mozStorage (Mozilla’s XPCOM интерфейсы для SQLite) или Session store API (XPCOM утилита хранения для расширений).

  Интерфейсы Веб хранилища

  Позволяет присваивать, извлекать (читать) и удалять данные для специфического домена и типа хранилища (сессии или локального).

  Web Storage API расширяет Window объект, добавляя к нему два новых свойства — Window.sessionStorage и Window.localStorage — которые предоставляют доступ к сессии текущего домена и к соответствующим локальным Storage объектам, и Window.onstorage (en-US) обработчик событий, который срабатывает при изменении объекта хранилища (например, при сохранении нового элемента)

  Событие storage срабатывает на объекте документа Window при изменении объекта хранилища.

  Примеры

  Чтобы проиллюстрировать типичное использование веб хранилища, мы создали простейший пример и назвали его Web Storage Demo. На лендинге нашего примера вы найдёте элементы управления для изменения фонового цвета, шрифта и изображения. Когда вы выбираете разные опции, страница мгновенно меняется. В дополнение, ваш выбор сохраняется в локальном хранилище, чтобы, если вы покинете страницу и потом загрузите её снова, ваши настройки восстановились.

  Также, мы сделали страницу вывода событий, которая выводит информацию о хранилище, каждый раз когда срабатывает событие StorageEvent (en-US). Загрузите эту страницу в другой вкладке браузера, затем вернитесь на лендинг и поменяйте значения цвета, шрифта или изображения и понаблюдайте, как меняется выводимая информация.

  Спецификации

  Specification
  HTML Living Standard # webstorage

  Поддержка браузерами

  Window.localStorage

  BCD tables only load in the browser

  Window.sessionStorage

  BCD tables only load in the browser

  Приватный режим/Инкогнито

  Многие браузеры в наши дни поддерживают опции приватности, названные «Инкогнито» или «Приватный просмотр» и т.п., что позволяет быть уверенными, что следов приватной сессии не остаётся после закрытия браузера. Это фундаментальная несовместимость с Веб хранилищем по очевидным причинам. Таким образом, производители браузеров экспериментируют с различными сценариями, как справиться с этой несовместимостью.

  Многие браузеры выбрали стратегию, когда API хранилища доступно и кажется полностью функциональным, с одним большим отличием — все данные хранилища стираются после закрытия браузера. Для этих браузеров есть ещё другие интерпретации того, что следует делать с хранимыми данными (от обычного режима браузера). Следует ли им быть доступными в приватном режиме? Затем, есть несколько браузеров, особенно Safari, которые выбрали решение, в котором хранилище доступно, но пустое и имеет квоту 0 байт, фактически, делая невозможной запись туда данных.

  Разработчики должны быть осведомлены об этих различных реализациях и принимать их во внимание при разработке веб-сайтов, зависящих от API Веб хранилища. Для получения более подробной информации, пожалуйста, посмотрите на этот пост блога WHATWG, специально посвящённый этой теме.

  Смотрите также

  • Использование Web Storage API
  • HTML5 Storage API By Venkatraman

  Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

  This page was last modified on 3 авг. 2023 г. by MDN contributors.

  Похожие публикации:

  1. Как настроить github на windows
  2. Как подключиться к виртуальной машине по ssh
  3. Сколько байт занимает string в c
  4. Что стало с алиэкспресс