Использование localStorage вместо cookies для промежуточного хранения данных.

Введение

Так исторически сложилось, что в работе многих сайтов, особенно Интернет-магазинов, широко используются cookie. Связано это с тем, что долгое время они представляли удобный инструмент и адекватной замены им не было. Созданы даже библиотеки для удобного создания, получения и удаления cookie (cookie.js):

createCookie(name,value,days);
//создание cookie
//name - имя параметра; value - значение параметра; days - срок годности данных в днях;

readCookie(name);
//чтение cookie по имени параметра;

eraseCookie(name);
//удаление cookie по имени параметра;

Более подробно о куки можно прочесть здесь.

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

Рассмотрим пример - изменение режима отображения витрины в интернет-магазине без перезагрузки - для сохранения состояния при смене страницы текущий вид записывался в cookies. Тот же метод применяется и для состояния свернутых/скрытых блоков.

Недостатки cookies при сценарии промежуточного хранилища

1. Coookie - это, по сути, строка, доступная нам через document.cookie, для получения нужного значения она "пилится" по знаку ";" на "Ключ = Значение", а затем, из этой пары по ключу получается значение
2. Все данные cookies передаются на сервер в виде заголовков при каждом запросе. Следовательно возрастает, пусть и не значительно, объем каждого передаваемого запроса/ответа. Плюс, с точки зрения текущего законодательства возникают вопросы - что именно будет храниться, сколько времени и с какой целью.
3. Размер куки ограничен 4 Kb

Преимущества LocalStorage (SessionStorage) при сценарии промежуточного хранилища

1. С хранилищем можно работать как с простым объектом, каковым оно и является
2. Все хранится локально и ничего не передается
3. Размер хранилища исчисляется мегабайтами
4. Современные браузеры выполняют операции чтения данных из хранилища 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. Примеры будут рассмотрены ниже.

Типы данных

Все элементы в браузерном хранилище представляют собой пары "ключ":"значение", причем как ключ, так и значение - всегда строка. Поэтому некоторые методы используют приведение типов, для обхода ограничений, накладываемых таким подходом. В результате, можно использовать разные типы данных - строки, числа, массивы, объекты. Возможные типы передаваемых и возвращаемых значений будут указаны в описании каждого метода.

Методы

Список методов

1. Создание элемента (create)
2. Создание элемента с текущей датой (createNow)
3. Создание элемента со сроком валидности (createExpires)
4. Получение элемента по ключу (get)
5. Получение элемента, с последующим приведением типа (getConverted)
6. Удаление элемента по ключу (remove)
7. Удаление элементов старее чем X часов (removeOlder)
8. Получение ключа элемента по индексу (key)
9. Получение свойства length хранилища (length)
10. Удаление элементов с истекшим сроком валидности
11. Очистка хранилища (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)

Параметры