Работа с хранилищем данных в JavaScript: localStorage, sessionStorage, cookie

@truefrontender

На стороне клиента веб-приложения могут использоваться различные методы для хранения данных. В JavaScript доступны несколько инструментов, включая localStorage, sessionStorage, cookie. Давайте рассмотрим их особенности.

localStorage

localStorage - это простой способ хранения данных на долгосрочной основе. Он сохраняет данные в виде пар ключ-значение и доступен даже после закрытия браузера.

Методы localStorage:

setItem - Сохраняет пару ключ-значение в localStorage.

При сохранении сложных типов данных, таких как массивы или объекты, в localStorage важно учесть, что localStorage может хранить только строки. Поэтому перед сохранением сложных типов данных их нужно преобразовать в строку. Для этого часто используются методы JSON.stringify() и JSON.parse() для преобразования объектов JavaScript в строку JSON и обратно.

Преобразовываем массив в строку и сохраняем его в localStorage под ключем basket

getItem(key) - Получает значение из localStorage по ключу.

Получаем из localStorage значение сохраненное под ключом basket

removeItem(key) - Удаляет элемент из localStorage по ключу.

clear() - Очищает все хранилище localStorage.

sessionStorage

sessionStorage - аналогичен localStorage, но сохраняет данные только в течение сеанса браузера. После закрытия вкладки или окна данные удаляются.

Методы sessionStorage:

setItem(key, value) - Сохраняет пару ключ-значение в sessionStorage.

getItem(key) - Получает значение из sessionStorage по ключу.

removeItem(key) - Удаляет элемент из sessionStorage по ключу.

clear() - Очищает все хранилище sessionStorage.

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

Максимально они могут хранить 4кб. Это ограничение является частью стандарта браузера и обусловлено необходимостью отправлять cookie в заголовке HTTP-запроса, что может негативно сказаться на производительности.

Чтение всех cookie

document.cookie возвращает строку, содержащую все cookie для текущего сайта в формате key1=value1; key2=value2;.

Установка cookie

document.cookie - это свойство, которое позволяет получить или установить все cookie для текущего документа.

В примере устанавливается cookie с именем user и значением TrueFrontender.

expires - определяет дату истечения срока действия cookie (в данном случае - до 31 декабря 2023 года).

path - определяет путь, для которого будет доступен cookie (в данном случае - для всего сайта).

Чтение значения конкретного cookie

document.cookie.split('; ') разделяет строку cookie на массив строк, каждая из которых представляет отдельный cookie.

find(row => row.startsWith('username=')) находит строку, начинающуюся с username=.

split('=')[1] разделяет найденную строку по знаку = и возвращает вторую часть (значение cookie).

Удаление cookie

Устанавливается cookie с истекшим сроком действия, что фактически приводит к его удалению. Дата Thu, 01 Jan 1970 00:00:00 GMT указывает на прошедшее время.

Сравнение хранилищ

Хранение данных:

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

Максимальный объем данных:

localStorage: Обычно позволяет хранить до 5 МБ данных на домен.
sessionStorage: Обычно позволяет хранить до 5 МБ данных на домен, но объем может быть меньше из-за различий в браузерах.
cookie: Обычно ограничен до 4KB на один cookie, 20-50 файлов cookie на домен в зависимости от браузера.

Доступность данных:

localStorage: Доступен для чтения и записи из любой вкладки или окна, работает даже после перезапуска браузера.
sessionStorage: Доступен только в пределах одной вкладки или окна, данные удаляются после закрытия вкладки или окна.
cookie: Доступен для чтения из любой вкладки или окна, но ограничен доменом и путем, устанавливающим cookie.

Итого:

Выбор между этими инструментами зависит от требований вашего приложения. Например, если нужно сохранить данные, доступные при каждом посещении сайта, localStorage или cookie могут быть хорошими вариантами. Если требуется временное хранение данных в рамках текущей сессии, sessionStorage может быть предпочтительнее.

Больше интересного в канале True Frontender