/ ↲
    Расширенный поиск

    JavaScript

    sessionStorage

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

    1. Кратко
    2. Пример
    3. Как это понять
    4. Как пишется
      1. Запись
      2. Чтение
      3. Удаление
      4. Очистка хранилища
      5. Количество полей в хранилище
      6. Получение ключа по индексу
    5. На практике
      1. akellbl4

    Кратко

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

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

    Пример

    Записываем данные:

            
          
          window.sessionStorage.setItem("name", "Doka Dog")
          window.sessionStorage.setItem("name", "Doka Dog")

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

            
          
          const name = window.sessionStorage.getItem("name")console.log(name)
          const name = window.sessionStorage.getItem("name")
console.log(name)

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

            
          
          window.sessionStorage.setItem("name", "Dog Doka")const name = window.sessionStorage.getItem("name")console.log(name)
          window.sessionStorage.setItem("name", "Dog Doka")
const name = window.sessionStorage.getItem("name")
console.log(name)

    Как это понять

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

    Как пишется

    Запись

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

            
          
          window.sessionStorage.setItem("name", "Doka Dog")
          window.sessionStorage.setItem("name", "Doka Dog")

    Чтение

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

            
          
          window.sessionStorage.getItem("name") // вернет "Doka Dog"window.sessionStorage.getItem("user") // вернет `null`
          window.sessionStorage.getItem("name") // вернет "Doka Dog"
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", "Doka Dog")window.sessionStorage.setItem("id", "5ac9bc9d1984")widow.sessionStorage.key(0) // вернет "name"
          window.sessionStorage.setItem("name", "Doka Dog")
window.sessionStorage.setItem("id", "5ac9bc9d1984")
widow.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)))
}

    На практике

    akellbl4

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

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

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

            
          
          const user = {  name: "Doka Dog",  avatarUrl: "mascot-doka.svg"};sessionStorage.setItem("user", JSON.stringify(user))
          const user = {
  name: "Doka Dog",
  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  }}
          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
  }
}

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

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

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