jStorage: замена стандартным cookies или как еще хранить данные на стороне клиента

Частенько возникает надобность хранить какой-то кусок информации у клиента, чтобы не создавать лишних запросов к серверу, тем самым снимая с него лишнюю нагрузку. Так же удобно хранить какую-нибудь мелкую информацию на стороне клиенте, чтобы можно было быстро воспользоваться ей, когда нужно.Чаще всего программисты используют для это cookies, но сегодня я бы хотел рассказать о другом способе. И я надеюсь, что он нравится вам больше.

Теория

jStorage — это маленькое key-value хранилище, которое использует ресурсы вашего браузера, куда и помещает данные. На данным момент поддерживаются все современные браузеры. Со списком поддерживаемых браузеров можно ознакомится на официальном сайте разработчика.

Или

jStorage: замена стандартным cookies или как еще хранить данные на стороне клиента

В отличие от cookies, в jStorage вы можете хранить, помимо обычных строк и чисел, так же объекты, JSON и XML данные. Например, массив из последних просмотренных товаров или оставленных комментариев. Можете даже сериализовать целую форму и когда будет нужно отправить ее на сервер.

Так же одной из особенностей является тот факт, что данные из jStorage никогда не пропадут сами и могут быть удалены, либо вами (если у вас есть к ним доступ), либо самими пользователем в ручную. Но я уверен, что обычному пользователи нет никого дела, до того, что и как у него хранится в браузере. К тому же, вы можете настроить TTL по собственному желанию, и данные будут автоматически стерты, когда вам это будет нужно.

Посмотрим как это работает в боевых условиях.

Практика

Установка

Просто добавляем jstorage.js в папку с проектом и ссылаемся на него с нужной нам страницы.

Основные методы

set(key, value[, options])

$.jStorage.set('products', productsArr, {TTL: 1000});  //productsArr : ['P-1', 'P-102'], хранит ID просмотренных товаров

Key — обязательно указывается и сам он не генерируется, он обязан быть string и ничем другим! Options в данном случаем может быть только значение TTL, которое указывается в милисекундах.

get(key[, default])

Представим что в примере выше, producsArr — это массив из ID тех продуктов на вашем сайте, которые просмотрел пользователь. Следовательно, чтобы добавить новый просмотренный продукт, вам надо сначала достать весь массив и добавить в него ID нового продукта, а потом сохранить массив в jStorage под тем же ключом.

var activeKey = $.jStorage.index(); // Массив из всех ключей в jStorage 
 var productsHistory = $.jStorage.get(activeKey[0]); // Допустим, что мы точно знаем что он там всего 1
 productsHistory.push('P-42'); //Добавляем ID нового продукта

 $.jStorage.set(activeKey, activeProducts.productsArr);

Хочу заметь, что теперь наш у нашего ключа нету значения TTL. Тоесть TTL = null, а не TTL = 0 (в этом бы случае, мы бы просто стерли все значение данного ключа). И если мы подразумеваем, что продолжаем работать с ключом из 1 примера (где TTL=1000), то теперь этого параметра там нет. Если же вы хотите его оставить надо прописывать его снова.

$.jStorage.set(activeKey, activeProducts.productsArr, {TTL: 1000});

index()

Как вы уже догадались, этот метод возвращает массив из ключей, которые в данный момент находятся в jStorage

var obj = {                                       // Декларируем новый объект
title: 'my history',
productsArr: [ 'P-1',  'P-2',  'P-3']
};

$.jStorage.set('myCustomKey', obj, {TTL: 1000});  // Сохраняем его под ключом 'myCustomKey'
$.jStorage.set('anotherKey', {name: 'Ivan'});   // Сохраняем другой объект под ключом 'anotherKey'
var keys = $.jStorage.index();
console.log(keys) // ['myCustomKey', 'anotherKey']

deleteKey(key)

Удаляем запись из jstorage

$.jStorage.deleteKey('anotherKey');

listenKeyChange(key, callback)

Метод который отслеживает был ли изменен ключ, и если был, то вызывает callback функцию. Один из самых полезных методов, благодаря ему можно реализовать подобие синхронизации с сервером в реальном времени.

$.jStorage.listenKeyChange("myCustomKey", function(key, action){
   //Можно создать AJAX запрос, который, например, будет сохранять изменения на сервере.
});

Очень удобно если например вам надо сохранить, например, корзину покупок. Потом без особых усилий, можно достать ее из БД и показать пользователю, даже если с данными в jStorage что-то случиться.

flush()

Удаляем все ключи, которые находятся в jStorage и их значения.

$.jStorage.flush()

Заключение

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