Что такое браузерное хранилище

1️⃣ Как кратко ответить

Браузерное хранилище — это механизм, позволяющий веб-приложениям сохранять данные на стороне клиента. Основные виды: LocalStorage, SessionStorage и Cookies. LocalStorage и SessionStorage предоставляют интерфейс для хранения данных в формате ключ-значение, но LocalStorage сохраняет данные без ограничения по времени, а SessionStorage — только на время сессии. Cookies используются для хранения небольших объемов данных, которые могут быть отправлены на сервер с каждым HTTP-запросом.

2️⃣ Подробное объяснение темы

Браузерное хранилище — это набор технологий, которые позволяют веб-приложениям сохранять данные на стороне клиента, то есть в браузере пользователя. Это полезно для хранения информации, которая должна быть доступна между перезагрузками страницы или даже между сессиями браузера. Основные виды браузерного хранилища включают LocalStorage, SessionStorage и Cookies.

LocalStorage

LocalStorage — это хранилище, которое позволяет сохранять данные в формате ключ-значение. Данные, сохраненные в LocalStorage, не имеют срока действия и остаются доступными даже после закрытия и повторного открытия браузера.

Пример использования LocalStorage:

// Сохранение данных в LocalStorage
localStorage.setItem('username', 'JohnDoe');
​
// Получение данных из LocalStorage
const username = localStorage.getItem('username'); // 'JohnDoe'
​
// Удаление данных из LocalStorage
localStorage.removeItem('username');
​
// Очистка всего LocalStorage
localStorage.clear();

• localStorage.setItem('username', 'JohnDoe'); — сохраняет значение 'JohnDoe' под ключом 'username'.
• localStorage.getItem('username'); — извлекает значение, связанное с ключом 'username'.
• localStorage.removeItem('username'); — удаляет элемент с ключом 'username'.
• localStorage.clear(); — очищает все данные, хранящиеся в LocalStorage.

SessionStorage

SessionStorage также хранит данные в формате ключ-значение, но в отличие от LocalStorage, данные сохраняются только на время текущей сессии. Это значит, что данные будут удалены, как только вкладка или окно браузера будет закрыто.

Пример использования SessionStorage:

// Сохранение данных в SessionStorage
sessionStorage.setItem('sessionID', '123456');
​
// Получение данных из SessionStorage
const sessionID = sessionStorage.getItem('sessionID'); // '123456'
​
// Удаление данных из SessionStorage
sessionStorage.removeItem('sessionID');
​
// Очистка всего SessionStorage
sessionStorage.clear();

• sessionStorage.setItem('sessionID', '123456'); — сохраняет значение '123456' под ключом 'sessionID'.
• sessionStorage.getItem('sessionID'); — извлекает значение, связанное с ключом 'sessionID'.
• sessionStorage.removeItem('sessionID'); — удаляет элемент с ключом 'sessionID'.
• sessionStorage.clear(); — очищает все данные, хранящиеся в SessionStorage.

Cookies

Cookies — это небольшие фрагменты данных, которые сохраняются в браузере и могут быть отправлены на сервер с каждым HTTP-запросом. Cookies часто используются для хранения информации о сессии пользователя, таких как идентификаторы сессий или предпочтения пользователя.

Пример создания и использования Cookies:

// Установка Cookie
document.cookie = "user=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";
​
// Получение всех Cookies
const cookies = document.cookie;
​
// Удаление Cookie
document.cookie = "user=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

• document.cookie = "user=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/"; — создает Cookie с именем 'user' и значением 'JohnDoe', которое истекает 31 декабря 2023 года.
• const cookies = document.cookie; — извлекает все Cookies в виде строки.
• document.cookie = "user=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; — удаляет Cookie с именем 'user' путем установки даты истечения в прошлое.

Браузерное хранилище позволяет веб-приложениям быть более интерактивными и персонализированными, сохраняя состояние и предпочтения пользователя между сессиями.