SessionStorage.setItem: примеры (JAVASCRIPT)

Простые примеры использования

Сохранение строкового значения:

sessionStorage.setItem('username', 'Алексей');

// Значение 'Алексей' сохранено по ключу 'username'.

Сохранение числового значения (оно будет преобразовано в строку):

sessionStorage.setItem('count', 25);
let value = sessionStorage.getItem('count');
console.log(typeof value);

// Результат в консоли: string

Обновление значения существующего ключа:

sessionStorage.setItem('theme', 'light');
sessionStorage.setItem('theme', 'dark');
console.log(sessionStorage.getItem('theme'));

// Результат в консоли: dark

Сохранение объекта с помощью JSON:

let user = { name: 'Мария', id: 42 };
sessionStorage.setItem('userData', JSON.stringify(user));
let retrieved = JSON.parse(sessionStorage.getItem('userData'));
console.log(retrieved.name);

// Результат в консоли: Мария

Похожие функции в JavaScript

localStorage.setItem() — работает аналогично, но сохраняет данные без срока действия. Данные не удаляются после закрытия вкладки или браузера и доступны между сессиями. Предпочтительнее для долговременного хранения настроек пользователя.

Cookies (document.cookie) — устаревший способ хранения небольших объемов данных (до 4 КБ). Данные отправляются на сервер с каждым HTTP-запросом. Используется для совместимости или работы с серверными сессиями.

IndexedDB — асинхронная база данных внутри браузера для хранения больших объемов структурированных данных. Применяется для сложных офлайн-приложений.

Выбор зависит от задачи: sessionStorage — для временных данных в рамках вкладки, localStorage — для постоянных настроек, Cookies — для обмена данными с сервером, IndexedDB — для работы с большими объемами данных.

Типичные ошибки

1. Сохранение нестроковых объектов без преобразования. Метод ожидает строку, иначе объект будет приведен к строке [object Object].

let obj = {x: 1};
sessionStorage.setItem('key', obj);
console.log(sessionStorage.getItem('key'));

// Результат в консоли: [object Object]

2. Игнорирование ограничения квоты хранилища. При попытке сохранить данные, превышающие лимит (обычно 5 МБ), генерируется исключение QuotaExceededError.

try {
  let hugeData = 'x'.repeat(10 * 1024 * 1024); // ~10 МБ
  sessionStorage.setItem('huge', hugeData);
} catch(e) {
  console.error('Ошибка:', e.name);
}

// Результат в консоли: Ошибка: QuotaExceededError

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

if (typeof sessionStorage !== 'undefined') {
  sessionStorage.setItem('test', 'value');
} else {
  console.log('Хранилище не поддерживается');
}

Изменения в последних версиях

Спецификация Web Storage API, включающая метод setItem, стабильна и не претерпевала значительных изменений в последних версиях стандартов. Основные изменения касались уточнений в обработке ошибок и политик безопасности.

В современных браузерах метод sessionStorage.setItem() доступен только в контекстах, защищенных протоколом HTTPS, или на локальных хостах (localhost, 127.0.0.1), что связано с усилением мер безопасности. Попытка вызова метода в небезопасном контексте (HTTP) может привести к блокировке функциональности.

Расширенные примеры использования

Автосохранение данных формы: Сохранение состояния полей формы при вводе для восстановления при случайном обновлении страницы.

// Предположим, есть поле ввода с id='comment'
document.getElementById('comment').addEventListener('input', (e) => {
  sessionStorage.setItem('draftComment', e.target.value);
});

// При загрузке страницы восстанавливаем значение
window.addEventListener('load', () => {
  let saved = sessionStorage.getItem('draftComment');
  if (saved) {
    document.getElementById('comment').value = saved;
  }
});

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

Кэширование ответов API на время сессии: Чтобы избежать повторных запросов за одними и теми же данными.

async function fetchCachedData(url) {
  let cacheKey = 'cache_' + url;
  let cached = sessionStorage.getItem(cacheKey);
  if (cached) {
    return JSON.parse(cached);
  }
  let response = await fetch(url);
  let data = await response.json();
  sessionStorage.setItem(cacheKey, JSON.stringify(data));
  return data;
}

Управление простой корзиной покупок в рамках сессии:

let cart = JSON.parse(sessionStorage.getItem('cart')) || [];

function addToCart(productId, productName) {
  cart.push({id: productId, name: productName});
  sessionStorage.setItem('cart', JSON.stringify(cart));
  updateCartView();
}

function clearCart() {
  sessionStorage.removeItem('cart');
  cart = [];
  updateCartView();
}

Сохранение сложного состояния приложения (Vue/React-like подход):

let appState = {
  filters: { category: 'books', price: 1000 },
  page: 2,
  sortBy: 'date'
};

// Сохранение состояния при изменении
function saveState(state) {
  sessionStorage.setItem('appState', JSON.stringify(state));
}

// Восстановление при загрузке
let savedState = JSON.parse(sessionStorage.getItem('appState'));
if (savedState) {
  appState = { ...appState, ...savedState };
}

Аналоги в других языках программирования

PHP: Сессии ($_SESSION). Данные хранятся на сервере, клиенту передается только идентификатор сессии (SESSION ID) в cookie.

<?php
session_start();
$_SESSION['username'] = 'Алексей';
echo $_SESSION['username'];
?>

// Вывод: Алексей

Python (Flask): session object. Аналогично PHP, сессии серверные.

from flask import Flask, session
app = Flask(__name__)
app.secret_key = 'secret'

@app.route('/')
def set_session():
    session['user'] = 'Admin'
    return session.get('user')

# Значение 'Admin' сохраняется на сервере.

C (Веб-разработка): Прямого аналога нет, так как C не используется для клиентского веба. На серверной стороне аналогична работа с cookies или серверными сессиями через CGI или фреймворки.

Основное отличие клиентского sessionStorage от серверных аналогов — хранение данных полностью на стороне пользователя в браузере, что снимает нагрузку с сервера, но делает данные уязвимыми и ограниченными по объему (обычно 5-10 МБ).