JS властивість Object.sessionStorage

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

sessionStorage є властивістю об'єкта Window у мові програмування JavaScript. Цей метод використовується для збереження даних сеансу на стороні клієнта протягом одного сеансу роботи веб-сторінки. Власне кажучи, sessionStorage дозволяє зберігати дані таким чином, що вони доступні лише протягом часу життя одного сеансу, інтегруючись з об'єктом Window, який представляє вікно браузера чи фрейм.

Завдяки sessionStorage розробники можуть легко управляти даними в межах сесії без необхідності використання серверного сховища. Основна суть методу полягає в тому, щоб забезпечити тимчасове зберігання даних, які можуть бути використані на протязі відвідання сторінки користувачем.

Для використання sessionStorage в JavaScript розробникам слід мати на увазі, що дані, збережені за допомогою цього методу, не будуть доступні після закриття вкладки чи вікна браузера. Це робить sessionStorage ідеальним інструментом для тимчасового зберігання даних, таких як стан введення користувача або інші тимчасові параметри.

Приклад використання:

// Збереження даних у sessionStorage
sessionStorage.setItem('username', 'JohnDoe');

// Отримання даних з sessionStorage
const username = sessionStorage.getItem('username');
console.log(username); // Виведе 'JohnDoe'

// Видалення даних з sessionStorage
sessionStorage.removeItem('username');

У вищевказаному прикладі sessionStorage використовується для збереження інформації про ім'я користувача, і після виклику методу getItem дані можуть бути легко отримані та використані в коді.

Розгляньмо більш складний варіант використання sessionStorage. Наприклад, можна зберігати об'єкти або масиви, що відкриває ширші можливості для збереження складних даних.

// Збереження об'єкту у sessionStorage
const user = {
  name: 'John Doe',
  age: 25,
  isAdmin: false
};
sessionStorage.setItem('user', JSON.stringify(user));

// Отримання та розшифрування об'єкту з sessionStorage
const storedUser = JSON.parse(sessionStorage.getItem('user'));
console.log(storedUser); // Виведе об'єкт { name: 'John Doe', age: 25, isAdmin: false }

Цей приклад демонструє, як sessionStorage може бути використаний для зберігання складних об'єктів, причому дані конвертуються в рядок за допомогою JSON.stringify перед збереженням та розкодовуються з використанням JSON.parse при отриманні.

Таким чином, sessionStorage є потужним інструментом для роботи з тимчасовими даними в браузері, забезпечуючи ефективне управління і зберіганням інформації в межах сесії.

правити

Порада

Уникайте збереження чутливої інформації у sessionStorage, оскільки вона може бути доступна в інших вкладках.

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

Порада

Використовуйте sessionStorage для обміну даними між сторінками. Передавайте значення ключів через сесійне сховище для спільного використання.

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

Порада

Забезпечте безпеку та уникніть помилок, перевіряючи наявність ключів перед їх використанням:

if (`key` in sessionStorage) {
   // використання значення за ключем
} else {
   // обробка відсутності ключа
}

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

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

Синтаксис

window.sessionStorage

Переглядачі

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

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

Переглядач
	4	2	4	10.5	12

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

Переглядач
	37	18	4	3.2

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

Переглядач
	-	1.10

Приклади

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

// Збереження даних в `sessionStorage`
const userName = "Користувач";
sessionStorage.setItem("`ім'я`", userName);

// Витягування даних з `sessionStorage` та виведення їх у консоль
const storedName = sessionStorage.getItem("`ім'я`");
console.log(`Вітаємо, ${storedName}!`);

// Початковий стан
const initialCart = { "`продукт1`": 2, "`продукт2`": 1 };

// Збереження об'єкта в `sessionStorage`
sessionStorage.setItem("`корзина`", JSON.stringify(initialCart));

// Отримання та оновлення при додаванні нового продукту
const storedCart = JSON.parse(sessionStorage.getItem("`корзина`")) || {};
const newProduct = "`продукт3`";

if (storedCart[newProduct]) {
    storedCart[newProduct]++;
} else {
    storedCart[newProduct] = 1;
}

// Поновлення об'єкта у `sessionStorage`
sessionStorage.setItem("`корзина`", JSON.stringify(storedCart));

// Виведення оновленого об'єкта в консоль
console.log("Оновлена корзина:", storedCart);