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 є потужним інструментом для роботи з тимчасовими даними в браузері, забезпечуючи ефективне управління і зберіганням інформації в межах сесії.
| Порада: | Уникайте збереження чутливої інформації у |
| Порада: | Використовуйте |
| Порада: | Забезпечте безпеку та уникніть помилок, перевіряючи наявність ключів перед їх використанням: |
Синтаксис
window.sessionStorageЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
4 |
2 |
4 |
10.5 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
3.2 |
| Переглядач | ||
|---|---|---|
- |
1.10 |
Приклади
Цей код демонструє використання sessionStorage для зберігання та витягування даних у сесії браузера. Користувач може взаємодіяти зі сторінкою, оновлюючи своє ім'я за допомогою кнопки.
У цьому прикладі ми використовуємо sessionStorage, щоб зберегти ім'я користувача. Після оновлення сторінки або відкриття нової вкладки дані залишаються доступними, доки триває сесія. Важливо використовувати унікальні ключі, такі як "ім'я", для ідентифікації даних.
// Збереження даних в `sessionStorage`
const userName = "Користувач";
sessionStorage.setItem("`ім'я`", userName);
// Витягування даних з `sessionStorage` та виведення їх у консоль
const storedName = sessionStorage.getItem("`ім'я`");
console.log(`Вітаємо, ${storedName}!`);У цьому складнішому прикладі ми використовуємо sessionStorage, щоб зберегти та оновити об'єкт з покупками. Дані зберігаються між різними сторінками чи вкладками, дозволяючи користувачеві зберігати свій вибір продуктів упродовж сесії.
// Початковий стан
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);