Владислав Калачев

Что такое Local Storage, Session Storage и Cookie?

12

Доброго времени суток, друзья. Сегодня мы подробно разберем для чего нужны Local Storage, Session Storage и Cookie, их различия и польза для нас.

Local Sotorage

Начнем с Web Storage (интернет-хранилищe или DOM-хранилищe) — это программные методы, используемые для хранения данных в браузере в формате ключ-значение. Основной идеей их использования является авторизация, работа со статистикой (пример Яндекс.Метрика) и другие «кейсы», когда требуется работать с временными данными пользователей. К Web Storage относится Local Storage и Session Storage. Начнем наш разбор с Local Storage.

В современных браузерах объект Window имеет свойство localStorage, при вызове которого мы получаем объект Storage. Следует отметить, что localStorage не поддерживается такими браузерами как IE6-7, Firefox2-3 и другими.  Данное хранилище может вмещать в себя до 5 Мбайт данных.

Список браузеров, поддерживаемых LocalStorage

Для работы с Local Storage используется методы и свойства, указанные в примере ниже. Ключи и значения в данных методах всегда должны быть строками, либо приведены к ним, используя метод JSON.stringify.

Пример:


// Добавление элемента
localStorage.setItem('key', ‘1')
// Получение элемента
localStorage.getItem('key')
// Удаление элемента
localStorage.removeItem('key')
// Удаление всех существующих элементов
localStorage.clear()
// Получить ключ по заданному индексу localStorage 
localStorage.key(1)
// Получить количество элементов
localStorage.length 

Session Storage

Список браузеров, поддерживаемых Session Storage

Основное отличие Session Storage от Local Storage заключается в том, что данные хранятся только в течение сессии, до момента закрытия браузера. Если добавить на одной вкладке данные в Session Storage, используя метод setItem(‘key’, ‘1′), и перезагрузить страницу, то мы получим эти данные, но если открыть другую страницу и запросить эти данные, используя метод getItem(‘key’), то в результате получим null (Session Storage повторяет методы и свойства Local Storage, которые были описаны выше).

Cookie

Поговорим о самом старом способе хранения данных в браузере, а именно cookies. В отличие от Web Storage в cookies можно хранить всего 4 Кбайт данных. Данный функционал является частью HTTP-протокола и в основном используется в авторизациях для отслеживания посещений сайта и сохранения данных о покупках. Веб сервер устанавливает куки, используя заголовок Set-Cookie, после чего браузер начинает автоматически добавлять их в каждый запрос, который будет производится на текущем домене. 

Для доступа к куки через DOM API можно воспользоваться следующей записью для получения куки в текущем домене.

Пример:


document.cookie

Куки в браузере имеет ряд свойств, которые являются стандартом при работе с ними. Рассмотрим некоторые из них:

name=value — указываем название куки и ее значение;

expires  — устанавливаем срок действия куки. Если он не установлен, то кука по умолчанию становится сессионной (session cookies), т.е. срок ее жизни будет ограничен сессией;

path — url путь, где будет доступна данная кука;

domain – домен, на котором будет доступны куки;

secure — если установить этот параметр, то кука будет доступна только через HTTPS протокол;

Для присвоения значения куки достаточно в объекте document свойству cookie присвоить строку с параметрами.

Пример:


document.cookie = "user_name=root; path=/root/; domain=test.ru; secure"

Заключение

Сегодня мы разобрали отличия между Local Storage, Session Storage и Cookie и получили представление о их работе. Посмотрели на примерах, как с ними можно взаимодействовать по средствам JavaScript. Надеюсь, что данная информация была вам полезна. Учитесь, думайте, пишите код. Удачного кодинга, друзья!

Подписывайтесь на наш канал в Telegram для получения самой последней и актуальной информации. 

0

Комментарии:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *