Вебсховище
Це механізм у веббраузерах, який дозволяє вебдодаткам зберігати та отримувати дані на стороні клієнта, тобто на комп'ютері користувача. Щоразу, коли ти змінюєш тему кольорів між світлою і темною, переглядаєш відео, додаєш товар у кошик, відкриваєш або закриваєш сайдбар, популярні вебзастосунки можуть запам'ятовувати стан інтерфейсу і в наступному відвідуванні відновлювати його.
Сookie
- Механізм для зберігання невеликих фрагментів текстових даних клієнта або сервера у браузері як пари ключ-значення. Сookie також мають позначку часу закінчення терміну їх дії, після чого автоматично видаляються браузером.
- Браузер і сервер можуть установлювати та отримувати cookie з браузера користувача. Крім того, cookie можуть автоматично надсилатися разом із кожним HTTP-запитом на сервер. У результаті сервер може легко розпізнати інформацію користувача з кожним HTTP-запитом, який зробив користувач.
Web Storage API
- Вебсховище не зберігає паролі, номери банківських карт та іншу конфіденційну інформацію. Якщо шкідливий скрипт отримає доступ до вебсторінки, він без проблем зможе прочитати ці дані.
- Вебсховище складається з локального сховища та сховища сеансів.
- Локальне сховище (Local Storage): унікальне для кожного вебдодатку і буде однаковим на кількох вкладках, де вебдодаток відкритий. Дані в локальному сховищі не видаляються, навіть після закриття браузера або вимкнення комп'ютера. Щоб їх видалити, потрібно використовувати JavaScript. Доступ до даних у локальному сховищі можливий з будь-якої вкладки або вікна браузера, пов'язаної з доменом, який створив дані. Локальне сховище може зберігати дані розміром від 5 Мб до 10 Мб. Точний обсяг пам’яті залежить від реалізації кожного браузера, але це значно більше, ніж 4 Кб пам’яті, яку пропонують cookie.
- Сховище сесії (Session Storage): на відміну від локального сховища, дані у сховищі сесії зберігаються лише протягом одної сесії браузера. Якщо користувач закриє вкладку або браузер, дані будуть видалені. Сховище сесії зручне для зберігання тимчасових даних або станів, які не повинні зберігатися довгий час.
Інструменти розробника
Локальне сховище. window.localStorage
Доступ до локалього сховища
console.log(window.localStorage); // Storage {length: 0}
setItem
Додавання даних до локального сховища
localStorage.setItem("ui-theme", "light");
const settings = { theme: "dark", isAuthenticated: true, options: [1, 2, 3], }; localStorage.setItem("settings", JSON.stringify(settings));
getItem
дозволяє зчитати зі сховища запис із ключем key і повертає його значення у JSON форматі.
const savedTheme = localStorage.getItem("ui-theme"); console.log(savedTheme); // "light"
removeItem
Видаляє зі сховища існуючий запис з ключем key. В результаті своєї роботи він не повертає значення.
- По ключу
localStorage.setItem("ui-theme", "dark"); console.log(localStorage.getItem("ui-theme")); // "dark" localStorage.removeItem("ui-theme"); console.log(localStorage.getItem("ui-theme")); // null
- Полная очистка
localStorage.clear();
Сховище сессії. window.sessionStorage
Доступ до сховища сесії
console.log(window.sessionStorage); // Storage {length: 0}
setItem
Додавання даних до сховища сесії
sessionStorage.setItem("ui-theme", "light");
const settings = { theme: "dark", isAuthenticated: true, options: [1, 2, 3], }; sessionStorage.setItem("settings", JSON.stringify(settings));
getItem
дозволяє зчитати зі сховища сесії запис із ключем key і повертає його значення у JSON форматі.
const savedTheme = sessionStorage.getItem("ui-theme"); console.log(savedTheme); // "light"
removeItem
Видаляє зі сховища сесії існуючий запис з ключем key. В результаті своєї роботи він не повертає значення.
- По ключу
sessionStorage.setItem("ui-theme", "dark"); console.log(sessionStorage.getItem("ui-theme")); // "dark" sessionStorage.removeItem("ui-theme"); console.log(sessionStorage.getItem("ui-theme")); // null
- Полная очистка
sessionStorage.clear();
key
отримання ключа за індексом
const myKey = localstorage.key(0);