Веб-браузеры предоставляют два основных механизма для хранения данных на клиентской стороне - localStorage и sessionStorage. Они позволяют сохранять данные в браузере и использовать их позже. В этой статье мы рассмотрим разницу между localStorage и sessionStorage, их методы работы и примеры использования.

localStorage

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

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

Для сохранения данных в localStorage можно использовать метод setItem():

localStorage.setItem("username", "John");

В приведенном выше примере мы сохраняем значение John с ключом username в localStorage.

Получение данных из localStorage

Для получения данных из localStorage используется метод getItem():

const username = localStorage.getItem("username");
console.log(username); // Выводит: "John"

Мы используем метод getItem() и передаем ключ username для получения значения "John".

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

Для удаления данных из localStorage используется метод removeItem():

localStorage.removeItem("username");

Мы передаем ключ username в метод removeItem() для удаления соответствующего значения из localStorage.

Очистка localStorage

Для полной очистки localStorage и удаления всех данных из него можно использовать метод clear():

localStorage.clear();

Метод clear() удаляет все данные из localStorage.

sessionStorage

sessionStorage представляет собой временное хранилище данных, специфичное для текущей сессии. Данные, сохраненные в sessionStorage, остаются доступными только в течение сеанса работы с браузером. После закрытия вкладки или браузера данные будут удалены.

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

Для сохранения данных в sessionStorage можно использовать метод setItem():

sessionStorage.setItem("username", "John");

В этом примере мы сохраняем значение John с ключом username в sessionStorage.

Получение данных из sessionStorage

Для получения данных из sessionStorage используется метод getItem():

const username = sessionStorage.getItem("username");
console.log(username); // Выводит: "John"

Мы используем метод getItem() и передаем ключ username для получения значения John.

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

Для удаления данных из sessionStorage используется метод removeItem():

sessionStorage.removeItem("username");

Мы передаем ключ username в метод removeItem() для удаления соответствующего значения из sessionStorage.

Очистка sessionStorage

Для полной очистки sessionStorage и удаления всех данных из него можно использовать метод clear():

sessionStorage.clear();

Метод clear() удаляет все данные из sessionStorage.

Заключение

localStorage и sessionStorage предоставляют удобные механизмы для хранения данных на клиентской стороне веб-браузера. localStorage сохраняет данные на неопределенный срок, а sessionStorage - только на время текущей сессии. Оба хранилища имеют методы setItem(), getItem(), removeItem() и clear() для сохранения, получения, удаления и очистки данных. Используйте localStorage для долгосрочного хранения данных, которые должны быть доступны даже после перезагрузки страницы, и sessionStorage для временного хранения данных, специфичных для текущей сессии.