Доброго времени суток, друзья. Сегодня мы подробно разберем для чего нужны 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 Мбайт данных.
Для работы с 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 от 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 для получения самой последней и актуальной информации.
Комментарии: