Использование localStorage вместо cookies для промежуточного хранения данных.
Введение
Так исторически сложилось, что в работе многих сайтов, особенно Интернет-магазинов, широко используются cookie. Связано это с тем, что долгое время они представляли удобный инструмент и адекватной замены им не было. Созданы даже библиотеки для удобного создания, получения и удаления cookie (cookie.js):
createCookie(name,value,days);
//создание cookie
//name - имя параметра; value - значение параметра; days - срок годности данных в днях;
readCookie(name);
//чтение cookie по имени параметра;
eraseCookie(name);
//удаление cookie по имени параметра;
Более подробно о куки можно прочесть здесь.
Однако с этого момента прошло время, изменились технологии, изменилось законодательство. Настало время пересмотреть концепцию хранения промежуточных данных.
Рассмотрим пример - изменение режима отображения витрины в интернет-магазине без перезагрузки - для сохранения состояния при смене страницы текущий вид записывался в cookies. Тот же метод применяется и для состояния свернутых/скрытых блоков.
Недостатки cookies при сценарии промежуточного хранилища
- Coookie - это, по сути, строка, доступная нам через document.cookie, для получения нужного значения она "пилится" по знаку ";" на "Ключ = Значение", а затем, из этой пары по ключу получается значение
- Все данные cookies передаются на сервер в виде заголовков при каждом запросе. Следовательно возрастает, пусть и не значительно, объем каждого передаваемого запроса/ответа. Плюс, с точки зрения текущего законодательства возникают вопросы - что именно будет храниться, сколько времени и с какой целью.
- Размер куки ограничен 4 Kb
Преимущества LocalStorage (SessionStorage) при сценарии промежуточного хранилища
- С хранилищем можно работать как с простым объектом, каковым оно и является
- Все хранится локально и ничего не передается
- Размер хранилища исчисляется мегабайтами
- Современные браузеры выполняют операции чтения данных из хранилища localStorage намного быстрее, чем из cookie. В браузере Google Chrome это разница достигает нескольких десятков раз, в Firefox – 9 раз и в IE 11 – 2 раза.
Отличия LocalStorage от SessionStorage
- хранилище сессии (sessionStorage) обслуживает область хранения данных для каждого домена, доступное на протяжении сессии. (пока браузер открыт, даже в случае перезагрузки страницы)
- локальное хранилище (localStorage) делает то же самое, но сохраняет данные даже в случае, если переоткрыть браузер.
Отсюда - если данные, которые мы сохраняем не будут нужны после закрытия страницы/вкладки, то используем sessionStorage и не волнуемся за очистку данных.
Использование LocalStorage (SessionStorage)
Работа с объектом Window.localStorage проста, документирована и подробно описана во многих источниках, например здесь.
Однако, простота методов, доступных по умолчанию заставляет совершать дополнительные телодвижения (читай - писать лишний код) для получения дополнительного функционала, например записи в localStorage объекта или задания срока валидности элемента. Писать лишнего мы не любим, ведь правда? А потому вашему вниманию представляется класс, расширяющий возможности работы с локальным хранилищем, путем добавления новых методов - mgStorage.
Подключение
Исходный код выложен в репозиторий
<script src="mgstorage-1.0.0.js" charset="utf-8"></script>
После подключения глобальному объекту window добавляется экземпляр класса mgStorage. Работа с хранилищами осуществляется вызовом методов этого класса.
Работа с локальным и сессионным хранилищем
Все методы данного класса реализованы таким образом, что доступна работа как с localStorage так и с sessionStorage. Если не указано особо, то метод применяется к localStorage, в то же время можно, передав один дополнительный параметр, переключиться на работу с sessionStorage. Примеры будут рассмотрены ниже.
Типы данных
Все элементы в браузерном хранилище представляют собой пары "ключ":"значение", причем как ключ, так и значение - всегда строка. Поэтому некоторые методы используют приведение типов, для обхода ограничений, накладываемых таким подходом. В результате, можно использовать разные типы данных - строки, числа, массивы, объекты. Возможные типы передаваемых и возвращаемых значений будут указаны в описании каждого метода.
Методы
Список методов
- Создание элемента (create)
- Создание элемента с текущей датой (createNow)
- Создание элемента со сроком валидности (createExpires)
- Получение элемента по ключу (get)
- Получение элемента, с последующим приведением типа (getConverted)
- Удаление элемента по ключу (remove)
- Удаление элементов старее чем X часов (removeOlder)
- Получение ключа элемента по индексу (key)
- Получение свойства length хранилища (length)
- Удаление элементов с истекшим сроком валидности
- Очистка хранилища (clear)
Создание элемента (create)
Описание
Создает новый элемент хранилища, с ключом "key" и значением "value". Если параметр "type" не будет передан - хранилищем по умолчанию будет выбрано localStorage, для выбора sessionStorage следует передать "session".
Если первым параметром "key" будет передан ключ уже существующего элемента - новый элемент создан не будет, значение существующего элемента будет переписано.
Если будет передано меньше 2-х параметров ("key" и "value") - элемент создан не будет, в консоль будет выведено сообщение и метод вернет undefined.
Использование
mgStorage.create(key, value, type)
Параметры
Примеры
mgStorage.create('item','value')
Результат
В качестве ключа можно передать число, оно будет приведено к строке:
mgStorage.create(2,'value')
Результат
В качестве значения, кроме строк, можно передавать числа, объекты и массивы, которые будут приведены к строке
mgStorage.create('number',5)
Результат
mgStorage.create('array',[5,6,9,8,7,8])
Результат
mgStorage.create('obj',{
item1: 1,
item2: [123, "two", 3.0],
item3:"hello"
})
Результат
Создание элемента с текущей датой (createNow)
Описание
Создает новый элемент хранилища с ключом "key" и объектом в качестве значения. Используется при необходимости фиксации времени создания элемента.
{
'content':value,
'creation_date': new Date()
}
В свойство "content" записывается переданное значение "value", в свойство "creation_date" - дата создания элемента. Затем созданный объект приводится к строке и записывается в хранилище.
Если параметр "type" не будет передан - хранилищем по умолчанию будет выбрано localStorage, для выбора sessionStorage следует передать "session".
Если первым параметром "key" будет передан ключ уже существующего элемента - новый элемент создан не будет, значение существующего элемента будет переписано.
Если будет передано меньше 2-х параметров ("key" и "value") - элемент создан не будет, в консоль будет выведено сообщение и метод вернет undefined.
Использование
mgStorage.createNow(key, value, type)
Параметры
Примеры
mgStorage.createNow('item','value')
Результат
mgStorage.createNow('array',[5,6,9,8,7,8])
Результат
mgStorage.createNow('obj',{
item1: 1,
item2: [123, "two", 3.0],
item3:"hello"
})
Результат
Создание элемента со сроком валидности (createExpires)
Описание
Создает новый элемент хранилища с ключом "key" и объектом в качестве значения. Используется при необходимости задания "срока годности" элементу, по прошествии которого элемент будет автоматически удален.
{
'content':value,
'expires_in': hours,
'creation_date': new Date()
}
В свойство "content" записывается переданное значение "value", в свойство "expires_in" - срок валидности элемента в часах, в свойство "creation_date" - дата создания элемента. Затем созданный объект приводится к строке и записывается в хранилище.
Если параметр "type" не будет передан - хранилищем по умолчанию будет выбрано localStorage, для выбора sessionStorage следует передать "session".
Если первым параметром "key" будет передан ключ уже существующего элемента - новый элемент создан не будет, значение существующего элемента будет переписано.
Если будет передано меньше 3-х параметров ("key", "value" и "hours") - элемент создан не будет, в консоль будет выведено сообщение и метод вернет undefined.
Использование
mgStorage.createExpires(key, value, hours, type)
Параметры
Примеры
mgStorage.createExpires('item','value', 5)
Результат
mgStorage.createExpires('obj',{
item1: 1,
item2: [123, "two", 3.0],
item3:"hello"
},5)
language-javascript
Результат
Получение элемента по ключу (get)
Описание
Возвращает значение элемента хранилища с ключом "key". Возвращена будет всегда строка.
Если параметр "type" не будет передан - чтение будет произведено из localStorage, для выбора sessionStorage следует передать "session".
Если не будет передан параметр "key" - в консоль будет выведено сообщение и метод вернет undefined.
Использование
mgStorage.get(key, type)
Параметры
Примеры
//запрос
mgStorage.get(2)
//возвращенное значение
"value"
Получение элемента, с последующим приведением типа (getConverted)
Описание
Возвращает значение элемента хранилища с ключом "key". При этом производится конвертация содержимого из строки в исходный тип. Имеет смысл использовать для элементов, с содержимом, отличным от простой строки. Внимание: если в качестве значения в элемент было записано число, оно вернется строкой, независимо от того какой метод вы используете, get или getConverted. Связано это с тем, что в хранилище все хранится строками, и отличить просто строку от строки, содержащей число не представляется возможным.
Если параметр "type" не будет передан - чтение будет произведено из localStorage, для выбора sessionStorage следует передать "session".
Если не будет передан параметр "key" - в консоль будет выведено сообщение и метод вернет undefined.
Использование
mgStorage.getConverted(key, type)
Параметры
Примеры
Содержимое хранилища
//запрос
mgStorage.getConverted('array')
//возвращенное значение (тип - array)
[5, 6, 9, 8, 7, 8]
Содержимое хранилища
//запрос
mgStorage.getConverted('obj')
//возвращенное значение (тип - Object)
{
item1: 1,
item2: [123, "two", 3.0],
item3:"hello",
expires_in: 5,
creation_date: "2019-01-10T12:06:38.485Z"
}
Удаление элемента по ключу (remove)
Описание
Удаляет элемент хранилища с ключом "key".
Если параметр "type" не будет передан - удаление будет произведено из localStorage, для выбора sessionStorage следует передать "session".
Если не будет передан параметр "key" - ничего не будет удалено, в консоль будет выведено сообщение и метод вернет undefined.
Использование
mgStorage.remove(key, type)
Параметры
Удаление элементов старее чем X часов (removeOlder)
Описание
Удаляет элемент хранилища, промежуток времени с момента создания которого больше, чем переданное время "hours" (в часах).
Если параметр "type" не будет передан - удаление будет произведено из localStorage, для выбора sessionStorage следует передать "session".
Если не будет передан параметр "hours" - ничего не будет удалено, в консоль будет выведено сообщение и метод вернет undefined.
Использование
mgStorage.removeOlder(hours, type)
Параметры
Получение ключа элемента по индексу (key)
Описание
Возвращает значение ключа элемента хранилища с переданным индексом "index".
Если параметр "type" не будет передан - будет выбрано хранилище localStorage, для выбора sessionStorage следует передать "session".
Если не будет передан параметр "index" - в консоль будет выведено сообщение и метод вернет undefined.
Использование
mgStorage.key(index,type)
Параметры
Получение свойства length хранилища (length)
Описание
Возвращает свойство length указанного хранилища.
Если параметр "type" не будет передан - будет возвращено свойcтво хранилища localStorage, для выбора sessionStorage следует передать "session".
Использование
mgStorage.length(type)
Параметры
Удаление элементов с истекшим сроком валидности
Описание
Удаляет элементы хранилища, срок валидности которых меньше чем время прошедшее с момента создания.
Обрабатывается всегда localStorage, так как sessionStorage очищается и так, при завершении сессии.
Использование
Метод срабатывает автоматически, при загрузке страницы с подключенным классом mgStorage.
Очистка хранилища (clear)
Описание
Удаляет все элементы из указанного хранилища.
Если параметр "type" не будет передан - будет очищено хранилище localStorage, для выбора sessionStorage следует передать "session".
Использование
mgStorage.clear(type)
Параметры