Вебсховище

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

С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();