Session storage что это

Local Storage vs. Session Storage vs. Cookie

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;

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

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 Мб+, зависит от браузера.
Данные не имеют «времени истечения».
Данные привязаны к источнику (домен/протокол/порт).

localStorage	sessionStorage
Совместно используется между всеми вкладками и окнами с одинаковым источником	Разделяется в рамках вкладки браузера, среди ифреймов из того же источника
«Переживает» перезапуск браузера	«Переживает» перезагрузку страницы (но не закрытие вкладки)

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 , значение которого будет автоматически сохраняться при каждом его изменении.

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

Как хранить что-то в браузере, только пока открыта вкладка

Когда-то давно мы делали свою программу-тудушку в браузере, получилось вполне рабочее приложение. Тогда для хранения списка задач использовали локальное хранилище браузера — localStorage. Это ячейка, в которой данные хранятся даже после закрытия страницы, и к ним можно вернуться в любой момент — главное, чтобы страница открывалась с того же адреса.

Но бывает так, что данные нужно хранить только до тех пор, пока открыта вкладка, а как пользователь её закрыл — данные можно удалять. Но, например, обращаться к этим данным нужно из разных скриптов на одной странице. Про такое сегодня и поговорим.

Что такое sessionStorage

SessionStorage — это временное хранилище данных в браузере. Временное — потому что после закрытия вкладки все данные в sessionStorage автоматически удаляются. При этом перезагрузка вкладки не влияет на данные, главное, чтобы не прервалась сессия — не отвалился интернет или не поменялась Wi-Fi-точка.

Где применяется sessionStorage

Чаще всего sessionStorage используют для хранения данных неавторизованных пользователей в простых интернет-магазинах: что он смотрел, что положил в корзину. То есть когда сами данные могут быть полезными, но мы не хотим бегать за пользователем в духе «Вы смотрели секс-игрушки? Вот рекомендации на основе ваших просмотров».

Ещё хорошее применение — когда нам не хочется городить логику с проверкой актуальности данных. Например, если это заказ еды из ресторана: человек пришёл, накидал в корзину блюд и ушёл. Если бы мы хранили его заказ в LocalStorage, при его следующем заходе мы бы показали ему прошлый незаконченный заказ — а вдруг каких-то блюд уже нет в меню? А вдруг сегодня что-то в «стопе»? Лучше хранить неоконченный заказ в sessionStorage, и если человек закроет вкладку — ну что ж, в следующий раз начинай сначала.

Ещё sessionStorage иногда используют для временного хранения пользовательских данных в формах. Например, человек заполняет адрес доставки и случайно нажимает «Перезагрузить». Тогда данные должны подтянуться из sessionStorage.

Как пользоваться sessionStorage

Точно так же, как localStorage, — все команды оттуда подходят и для временного хранилища. Вот пара примеров:

sessionStorage.setItem(‘key’, ‘Факт для запоминания’) — кладём ‘Факт для запоминания’ в ячейку с названием ‘key’.

sessionStorage.getItem(‘key’) — получаем то, что хранится в ячейке с названием ‘key’.

sessionStorage.removeItem(‘key’) — удаляем ячейку памяти с именем ‘key’.

sessionStorage.clear() — полностью очищаем временное хранилище

for(let key in sessionStorage) < // тело цикла >— цикл, который перебирает все ячейки в sessionStorage

Пример страницы, которая забывает всё после закрытия

Напишем простой код — он сохранит наши данные во время сессии и забудет их после закрытия вкладки. Логика будет простая:

При перезагрузке страницы спрашиваем пользователя, что бы он хотел запомнить.
Кладём ответ во временное хранилище, где ключ — это текущее время.
Выводим всё, что запомнила страница к этому моменту.

Для этого нам понадобится пустая страница, к которой мы подключим скрипт, и сам скрипт — он запомнит и выведет данные пользователя.

Сначала сделаем страницу:

      Document 1

Теперь создадим новый файл script.js и положим туда простой код:

// предлагаем пользователю что-то ввести var data = prompt("Что нужно запомнить?") // запоминаем информацию в ключе, который создаётся из текущего времени sessionStorage.setItem(String(Date.now()), data); // здесь мы соберём всё то, что запомнили var lst; // перебираем все ячейки во временном хранилище for(let key in sessionStorage) < // если ячейка не пустая if ((sessionStorage.getItem(key) != null) && (sessionStorage.getItem(key) != ''))< // добавляем её в список для вывода lst += '\n' + sessionStorage.getItem(key); >> // показываем пользователю, что хранится в памяти страницы alert('Вот что я помню: ' + '\n' + lst);

Обновляем несколько раз страницу и смотрим, как она запоминает всё, что мы вводим:

Как хранить что-то в браузере, только пока открыта вкладка

А когда мы закроем вкладку и откроем страницу заново — все данные исчезнут:

Как хранить что-то в браузере, только пока открыта вкладка

Вы фронтендер? Гляньте сюда ↓

У нас есть курсы по прокачке навыков до уровня middle и далее. Начать можно бесплатно. Посмотрите, интересно ли вам это.

Вы фронтендер? Гляньте сюда ↓

Получите ИТ-профессию

В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.

session Storage

Храним данные пользователя в браузере, но только до момента, пока открыта текущая вкладка.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 20 декабря 2021

session Storage — один из способов хранить данные в браузере. Обзор всех способов описан в статье «Хранение данных в браузере».

Кратко

Скопировать ссылку «Кратко» Скопировано

Это объект, хранящийся в window , который позволяет сохранять данные в браузере на время сессии. Этот тип хранилища очень похож на local Storage и работает как хранилище данных в формате ключ-значение. При сохранении данных мы указываем имя поля, в которое должны быть сохранены данные, и затем используем это имя для их получения.

Сессия страницы создаётся при открытии новой вкладки браузера. Сессия остаётся активной до тех пор, пока открыта вкладка, а состояние сессии сохраняется между перезагрузками. Открытие новой вкладки с таким же адресом приведёт к созданию новой сессии.
Значения хранятся в виде строк. При попытке сохранения других типов данных, они будут приведены к строке. Например, если записать число, то при чтении нам вернётся число, записанное в строку.
Максимальный объем данных ограничен размером 5MB.

Пример

Скопировать ссылку «Пример» Скопировано

 window.sessionStorage.setItem('name', 'Дока Дог') window.sessionStorage.setItem('name', 'Дока Дог')

При чтении ранее записанных данных по ключу name мы получим Дока Дог :

 const name = window.sessionStorage.getItem('name')console.log(name)// Дока Дог const name = window.sessionStorage.getItem('name') console.log(name) // Дока Дог

Повторная запись по тому же ключу приведёт к замене данных:

 window.sessionStorage.setItem('name', 'Собака Дока')const name = window.sessionStorage.getItem('name')console.log(name)// Собака Дока window.sessionStorage.setItem('name', 'Собака Дока') const name = window.sessionStorage.getItem('name') console.log(name) // Собака Дока

Как понять

Скопировать ссылку «Как понять» Скопировано

Если вам нужно хранить данные в течение активной сессии, то session Storage отлично подойдёт для этого.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Запись

Скопировать ссылку «Запись» Скопировано

Запись производит метод set Item ( ‘ключ’ , ‘значение’ ) , который принимает два строковых параметра: ключ, по которому будет сохранено значение, и само значение.

 window.sessionStorage.setItem('name', 'Дока Дог') window.sessionStorage.setItem('name', 'Дока Дог')

Чтение

Скопировать ссылку «Чтение» Скопировано

За чтение отвечает get Item ( ‘ключ’ ) c одним параметром, который указывает на ключ для чтения и возвращает полученное значение из хранилища. Если по этому ключу нет значения, то метод вернёт null .

 window.sessionStorage.getItem('name')// вернёт 'Дока Дог'window.sessionStorage.getItem('user')// вернёт null window.sessionStorage.getItem('name') // вернёт 'Дока Дог' window.sessionStorage.getItem('user') // вернёт null

Удаление

Скопировать ссылку «Удаление» Скопировано

Удаляет запись из хранилища remove Item ( ‘ключ’ ) . Он успешно выполнится даже если указанного ключа не существует в хранилище.

 window.sessionStorage.removeItem('name')window.sessionStorage.removeItem('user') window.sessionStorage.removeItem('name') window.sessionStorage.removeItem('user')

Очистка хранилища

Скопировать ссылку «Очистка хранилища» Скопировано

Метод clear ( ) очищает хранилище полностью.

 window.sessionStorage.clear() window.sessionStorage.clear()

Количество полей в хранилище

Скопировать ссылку «Количество полей в хранилище» Скопировано

Используя свойство length , можно узнать, сколько всего полей было записано в хранилище.

 window.sessionStorage.length window.sessionStorage.length

Получение ключа по индексу

Скопировать ссылку «Получение ключа по индексу» Скопировано

Метод key ( ) получает ключ по индексу. Значения в хранилище хранятся в порядке их добавления, поэтому значение, добавленное первым, будет храниться в позиции 0 и так далее.

 window.sessionStorage.setItem('name', 'Дока Дог')window.sessionStorage.setItem('id', '5ac9bc9d1984') console.log(window.sessionStorage.key(0))// 'name' window.sessionStorage.setItem('name', 'Дока Дог') window.sessionStorage.setItem('id', '5ac9bc9d1984') console.log(window.sessionStorage.key(0)) // 'name'

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

 const sessionStorageSize = window.sessionStorage.lengthfor (let i = 0; i < sessionStorageSize; i++)  console.log(window.sessionStorage.getItem(sessionStorage.key(i)))> const sessionStorageSize = window.sessionStorage.length for (let i = 0; i  sessionStorageSize; i++)  console.log(window.sessionStorage.getItem(sessionStorage.key(i))) >

На практике

Скопировать ссылку «На практике» Скопировано

Павел Минеев советует

Скопировать ссылку «Павел Минеев советует» Скопировано

�� session Storage в реальных проектах используется достаточно редко, но иногда может быть полезен. Например, если мы не хотим потерять данные, когда пользователь случайно обновил страницу.

�� Иногда нам нужно сохранить не просто текст, а целую структуру данных, и в этом нам поможет JSON . stringify ( ) .

 const user =  name: 'Дока Дог', avatarUrl: 'mascot-doka.svg'> sessionStorage.setItem('user', JSON.stringify(user)) const user =  name: 'Дока Дог', avatarUrl: 'mascot-doka.svg' > sessionStorage.setItem('user', JSON.stringify(user))

И после чтения парсим:

 function readUser()  const userJSON = sessionStorage.getItem('user') if (userJSON === null)  return undefined > // Если вдруг в хранилище оказался невалидный JSON предохраняемся от этого try  return JSON.parse(userJSON) > catch (e)  sessionStorage.removeItem('user') return undefined >> console.log(readUser())// // name: 'Дока Дог',// avatarUrl: 'mascot-doka.svg'// > function readUser()  const userJSON = sessionStorage.getItem('user') if (userJSON === null)  return undefined > // Если вдруг в хранилище оказался невалидный JSON предохраняемся от этого try  return JSON.parse(userJSON) > catch (e)  sessionStorage.removeItem('user') return undefined > > console.log(readUser()) // // name: 'Дока Дог', // avatarUrl: 'mascot-doka.svg' // >

�� Если ваш сайт использует скрипты аналитики или другие внешние библиотеки, то они также имеют доступ к хранилищу. Поэтому лучше именовать ключи для записи в хранилище с префиксом в едином стиле. Например, при записи чего-либо на таком сайте я бы выбрал префикс YD _ , тогда можно сгруппировать только нужные значения или отфильтровать их в инструментах разработчика.

�� Используйте функции-обёртки для предотвращения ошибок, связанных с неудачными попытками записи, отсутствием session Storage в браузере и дублированием кода.

 function getItem(key, value)  try  return window.sessionStorage.getItem(key) > catch (e)  console.log(e) >> function setItem(key, value)  try  return window.sessionStorage.getItem(key, value) > catch (e)  console.log(e) >> function setJSON(key, value)  try  const json = JSON.stringify(value) setItem(key, json) > catch (e)  console.error(e) >> function getJSON(key)  try  const json = getItem(key) return JSON.parse(json) > catch (e)  console.error(e) >> function getItem(key, value)  try  return window.sessionStorage.getItem(key) > catch (e)  console.log(e) > > function setItem(key, value)  try  return window.sessionStorage.getItem(key, value) > catch (e)  console.log(e) > > function setJSON(key, value)  try  const json = JSON.stringify(value) setItem(key, json) > catch (e)  console.error(e) > > function getJSON(key)  try  const json = getItem(key) return JSON.parse(json) > catch (e)  console.error(e) > >

Session storage что это

Local Storage vs. Session Storage vs. Cookie

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

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

Cookie

LocalStorage, sessionStorage

Демо localStorage

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

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

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

sessionStorage

Событие storage

Итого

Задачи

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

Как хранить что-то в браузере, только пока открыта вкладка

Что такое sessionStorage

Где применяется sessionStorage

Как пользоваться sessionStorage

Пример страницы, которая забывает всё после закрытия

session Storage

Кратко

Пример

Как понять

Как пишется

Запись

Чтение

Удаление

Очистка хранилища

Количество полей в хранилище

Получение ключа по индексу

На практике

Павел Минеев советует

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