`sessionStorage`

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

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

Кратко

Скопировано

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

Сессия страницы создаётся при открытии новой вкладки браузера. Сессия остаётся активной до тех пор, пока открыта вкладка, а состояние сессии сохраняется между перезагрузками. Открытие новой вкладки с таким же адресом приведёт к созданию новой сессии.
Значения хранятся в виде строк. При попытке сохранения других типов данных, они будут приведены к строке. Например, если записать число, то при чтении нам вернётся число, записанное в строку.
Максимальный объём данных ограничен размером 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)
// Собака Дока

Как понять

Скопировано

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

Как пишется

Скопировано

Запись

Скопировано

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

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

Чтение

Скопировано

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

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

Удаление

Скопировано

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

        
          
          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)))
}

На практике

Скопировано

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

Скопировано

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

Открыть демо в новой вкладке

🛠 Иногда нам нужно сохранить не просто текст, а целую структуру данных, и в этом нам поможет 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_{название ключа}, тогда можно сгруппировать только нужные значения или отфильтровать их в инструментах разработчика.

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

        
          
          function getItem(key) {  try {    return window.sessionStorage.getItem(key)  } catch (e) {    console.log(e)  }}function setItem(key, value) {  try {    return window.sessionStorage.setItem(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) {
  try {
    return window.sessionStorage.getItem(key)
  } catch (e) {
    console.log(e)
  }
}

function setItem(key, value) {
  try {
    return window.sessionStorage.setItem(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)
  }
}

Кратко

Пример

Как понять

Как пишется

Запись

Чтение

Удаление

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

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

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

На практике

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

Читайте также

Браузерное окружение, BOM

JSON

Событийная модель