Использование LocalStorage и SessionStorage в JavaScript

LocalStorage и SessionStorage являются механизмами хранения данных на стороне клиента, которые позволяют сохранять и извлекать информацию в веб-браузере без использования сервера. Они являются частью Web Storage API и позволяют хранить пары ключ-значение.

LocalStorage

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

Предположим, у вас есть веб-приложение, которое использует данные о предпочтениях пользователя, такие как тема, язык и шрифт. Вы можете использовать LocalStorage для сохранения этих предпочтений.

Сохранение данных

localStorage.setItem('theme', 'dark');
localStorage.setItem('language', 'en');
localStorage.setItem('fontSize', '16px');

Извлечение данных

let theme = localStorage.getItem('theme');
let language = localStorage.getItem('language');
let fontSize = localStorage.getItem('fontSize');

Удаление данных

localStorage.clear();

SessionStorage

Данные, сохраненные в SessionStorage, будут доступны только в рамках текущей сессии браузера. Они удаляются при закрытии вкладки или окна браузера.

Предположим, вы хотите сохранить информацию о товарах, добавленных в корзину в вашем интернет-магазине, и они должны быть доступны только в рамках текущей сессии.

Сохранение данных

sessionStorage.setItem('cart', JSON.stringify([{id: 1, name: 'item1', price: 100}]));

Извлечение данных

let cart = JSON.parse(sessionStorage.getItem('cart'));

Удаление данных

sessionStorage.removeItem('cart');

Очистка всего SessionStorage

sessionStorage.clear();

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