JavaScript sessionStorage — сховище на час вкладки

sessionStorage зберігає дані до закриття вкладки. Той самий інтерфейс, що й у localStorage, але інший час життя.

правити

Загальний опис

Ключова відмінність — кожна вкладка має власне сховище. Відкрив той самий сайт у двох вкладках — це два незалежні сховища, які нічого не знають одне про одне.

Звідси й застосування: чернетка форми, крок майстра, стан фільтрів — усе, що логічно належить цьому сеансу роботи, а не користувачу назавжди.

Перезавантаження сторінки дані переживають — зникають вони лише разом із вкладкою.

правити

Порада

Багатокроковий майстер зручно тримати саме тут: користувач може заповнювати дві різні заявки у двох вкладках, і вони не переплутаються.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
sessionStorage	4+	3.5+	4+	10.5+	12+	8+

Підтримка: мобільні переглядачі

Переглядач
sessionStorage	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

<textarea id="draft"></textarea>
<div id="demo-form">Демонстраційний елемент</div>

const form = document.getElementById('demo-form');

const draft = document.getElementById('draft');

// відновлюємо після перезавантаження
draft.value = sessionStorage.getItem('draft') ?? '';

draft.addEventListener('input', () => {
    sessionStorage.setItem('draft', draft.value);
});

// надіслали — чернетка більше не потрібна
form.addEventListener('submit', () => {
    sessionStorage.removeItem('draft');
});