Javascript class for managing local and sesion storage

Недостатки 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.

Подключение

language-html После подключения глобальному объекту window добавляется класс mgStorage. Работа с хранилищами осуществляется вызовом методов этого класса.

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

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

Методы Создание элемента (create) Создание элемента с текущей датой (createNow) Создание элемента со сроком валидности (createExpires) Получение элемента по ключу (get) Получение элемента, с последующим приведением типа (getConverted) Удаление элемента по ключу (remove) Удаление элементов старее чем X часов (removeOlder) Получение ключа элемента по индексу (key) Получение свойства length хранилища (length) Удаление элементов с истекшим сроком валидности Очистка хранилища (clear)

Описание

Создает новый элемент хранилища, с ключом "key" и значением "value". Если параметр "type" не будет передан - хранилищем по умолчанию будет выбрано localStorage, для выбора sessionStorage следует передать "session".

Если первым параметром "key" будет передан ключ уже существующего элемента - новый элемент создан не будет, значение существующего элемента будет переписано.

Если будет передано меньше 2-х параметров ("key" и "value") - элемент создан не будет, в консоль будет выведено сообщение и метод вернет undefined.

Использование

mgStorage.create(key, value, type) language-javascript Параметры

Параметр Required Принимаемый тип данных/значение Возвращает key true string, number undefined value true string, number, boolean, object, array type false '', 'local', 'session' Примеры

mgStorage.create('item','value') language-javascript В качестве ключа можно передать число, оно будет приведено к строке:

mgStorage.create(2,'value') language-javascript В качестве значения, кроме строк, можно передавать числа, объекты и массивы, которые будут приведены к строке

mgStorage.create('number',5) language-javascript mgStorage.create('array',[5,6,9,8,7,8]) language-javascript mgStorage.create('obj',{ item1: 1, item2: [123, "two", 3.0], item3:"hello" }) language-javascript

Описание

Создает новый элемент хранилища с ключом "key" и объектом в качестве значения. Используется при необходимости фиксации времени создания элемента.

{ 'content':value, 'creation_date': new Date() } language-javascript В свойство "content" записывается переданное значение "value", в свойство "creation_date" - дата создания элемента. Затем созданный объект приводится к строке и записывается в хранилище.

Если параметр "type" не будет передан - хранилищем по умолчанию будет выбрано localStorage, для выбора sessionStorage следует передать "session".

Если первым параметром "key" будет передан ключ уже существующего элемента - новый элемент создан не будет, значение существующего элемента будет переписано.

Если будет передано меньше 2-х параметров ("key" и "value") - элемент создан не будет, в консоль будет выведено сообщение и метод вернет undefined.

Использование

mgStorage.createNow(key, value, type) language-javascript Параметры

Параметр Required Принимаемый тип данных/значение Возвращает key true string, number undefined value true string, number, boolean, object, array type false '', 'local', 'session' Примеры

mgStorage.createNow('item','value') language-javascript mgStorage.createNow('array',[5,6,9,8,7,8]) language-javascript mgStorage.createNow('obj',{ item1: 1, item2: [123, "two", 3.0], item3:"hello" }) language-javascript

Описание

Создает новый элемент хранилища с ключом "key" и объектом в качестве значения. Используется при необходимости задания "срока годности" элементу, про прошествии которого элемент будет автоматически удален.

{ 'content':value, 'expires_in': hours, 'creation_date': new Date() } language-javascript В свойство "content" записывается переданное значение "value", в свойство "expires_in" - срок валидности элемента в часах, в свойство "creation_date" - дата создания элемента. Затем созданный объект приводится к строке и записывается в хранилище.

Если параметр "type" не будет передан - хранилищем по умолчанию будет выбрано localStorage, для выбора sessionStorage следует передать "session".

Если первым параметром "key" будет передан ключ уже существующего элемента - новый элемент создан не будет, значение существующего элемента будет переписано.

Если будет передано меньше 3-х параметров ("key", "value" и "hours") - элемент создан не будет, в консоль будет выведено сообщение и метод вернет undefined.

Использование

mgStorage.createExpires(key, value, hours, type) language-javascript Параметры

Параметр Required Принимаемый тип данных/значение Возвращает key true string, number undefined value true string, number, boolean, object, array hours true string, number type false '', 'local', 'session' Примеры

mgStorage.createExpires('item','value', 5) language-javascript mgStorage.createExpires('obj',{ item1: 1, item2: [123, "two", 3.0], item3:"hello" },5) language-javascript

Описание

Возвращает значение элемента хранилища с ключом "key". Возвращена будет всегда строка.

Если параметр "type" не будет передан - чтение будет произведено из localStorage, для выбора sessionStorage следует передать "session".

Если не будет передан параметр "key" - в консоль будет выведено сообщение и метод вернет undefined.

Использование

mgStorage.get(key, type) language-javascript Параметры

Параметр Required Принимаемый тип данных/значение Возвращает key true string, number содержимое элемента, string type false '', 'local', 'session' Примеры

//запрос mgStorage.get(2)

//возвращенное значение "value" language-javascript

Описание

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

Если параметр "type" не будет передан - чтение будет произведено из localStorage, для выбора sessionStorage следует передать "session".

Если не будет передан параметр "key" - в консоль будет выведено сообщение и метод вернет undefined.

Использование

mgStorage.getConverted(key, type) language-javascript Параметры

Параметр Required Принимаемый тип данных/значение Возвращает key true string, number преобразованное содержимое элемента (string, array, object) type false '', 'local', 'session' Примеры

//запрос mgStorage.getConverted('array')

//возвращенное значение (тип - array) [5, 6, 9, 8, 7, 8] language-javascript //запрос mgStorage.getConverted('obj')

//возвращенное значение (тип - Object) { item1: 1, item2: [123, "two", 3.0], item3:"hello", expires_in: 5, creation_date: "2019-01-10T12:06:38.485Z" } language-javascript

Описание

Удаляет элемент хранилища с ключом "key".

Если параметр "type" не будет передан - удаление будет произведено из localStorage, для выбора sessionStorage следует передать "session".

Если не будет передан параметр "key" - ничего не будет удалено, в консоль будет выведено сообщение и метод вернет undefined.

Использование

mgStorage.remove(key, type) language-javascript Параметры

Параметр Required Принимаемый тип данных/значение Возвращает key true string, number undefined type false '', 'local', 'session'

Описание

Удаляет элемент хранилища, промежуток времени с момента создания которого больше, чем переданное время "hours" (в часах).

Если параметр "type" не будет передан - удаление будет произведено из localStorage, для выбора sessionStorage следует передать "session".

Если не будет передан параметр "hours" - ничего не будет удалено, в консоль будет выведено сообщение и метод вернет undefined.

Использование

mgStorage.removeOlder(hours, type) language-javascript Параметры

Параметр Required Принимаемый тип данных/значение Возвращает hours true string, number undefined type false '', 'local', 'session'

Описание

Возвращает значение ключа элемента хранилища с переданным индексом "index".

Если параметр "type" не будет передан - будет выбрано хранилище localStorage, для выбора sessionStorage следует передать "session".

Если не будет передан параметр "index" - в консоль будет выведено сообщение и метод вернет undefined.

Использование

mgStorage.key(index,type) language-javascript Параметры

Параметр Required Принимаемый тип данных/значение Возвращает index true string, number ключ элемента, string type false '', 'local', 'session'

Описание

Возвращает свойство length указанного хранилища.

Если параметр "type" не будет передан - будет возвращено свойcтво хранилища localStorage, для выбора sessionStorage следует передать "session".

Использование

mgStorage.length(type) language-javascript Параметры

Параметр Required Принимаемый тип данных/значение Возвращает type false '', 'local', 'session' кол-во элементов хранилища, number

Описание

Удаляет элементы хранилища, срок валидности которых меньше чем время прошедшее с момента создания.

Обрабатывается всегда localStorage, так как sessionStorage очищается и так, при завершении сессии.

Использование

Метод срабатывает автоматически, при загрузке страницы с подключенным классом mgStorage.

Описание

Удаляет все элементы из указанного хранилища.

Если параметр "type" не будет передан - будет очищено хранилище localStorage, для выбора sessionStorage следует передать "session".

Использование

mgStorage.clear(type) language-javascript Параметры

Параметр Required Принимаемый тип данных/значение Возвращает type false '', 'local', 'session' undefined