9 JavaScript библиотек для работы с локальным хранилищем

API локального хранилища HTML5 (часть Web Хранилища) сопровождается отличной браузерной поддержкой и уже используется во множестве приложений. Его API довольно-таки прост, однако и там есть свои нюансы, которые встречаются при работе с кукисами.

За последний год или около того я столкнулся с множеством инструментов и библиотек, которые облегчают работу с localStorage API. В этой статье мы рассмотрим примеры работы некоторых из них.

Lockr

Lockr - это библиотека для работы с localStorage API, которая включает в себя целый набор полезных методов и фишек. К примеру в ней решено ограничение, которое есть при работе с чистым localStorage, а именно теперь можно хранить не только строки. Lockr позволяет записывать данные любого типа без необходимости преобразования:

Lockr.set('website', 'SitePoint'); // строка
Lockr.set('categories', 8); // число
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]); // объект

Другие возможности:

• Метод извлечения данных Lockr.get()
• Возврат массива всех данных Lockr.getAll()
• Удаление всех данных Lockr.flush()
• Добавление/удаление значений по хешу, используемому в качестве ключа: Lockr.sadd и Lockr.srem

The Local Storage Bridge

Библиотека, которая весит 1KB для обмена данными между вкладками браузера, используя localStorage и коммуникационные каналы. После добавления библиотеки можете опробовать данный пример:

// отправка сообщения
lsbridge.send('my-namespace', {
  message: 'Hello world!'
});

// отслеживание новых сообщений
lsbridge.subscribe('my-namespace', function(data) {
  console.log(data); // prints: 'Hello world!'
});

Как видно, метод send() создаёт и отправляет сообщение, а метод subscribe() его получает. Больше примеров можно найти тут.

Barn

Данная библиотека работает по принципу Redis API. Ниже можно увидеть пример, взятый из README. В нём продемонстрирована работа множества методов.

var barn = new Barn(localStorage);

barn.set('key', 'val');
console.log(barn.get('key')); // val

barn.lpush('list', 'val1');
barn.lpush('list', 'val2');
console.log(barn.rpop('list')); // val1
console.log(barn.rpop('list')); // val2

barn.sadd('set', 'val1');
barn.sadd('set', 'val2');
barn.sadd('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2', 'val3']
barn.srem('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2']

Так же API предоставляет методы для выборки целого диапазона данных. В репозитории есть полная информация о всех методах.

store.js

Ещё одна библиотека, похожая на Lockr, но с более широкой браузерной поддержкой. В README написано, что “store.js использует localStorage если браузер это позволяет. В противном случае, при использовании IE6 и IE7 будут задействованы другие механизмы”

Простой пример:

// сохраняем 'SitePoint' в 'website'
store.set('website', 'SitePoint');

// получаем 'website'
store.get('website');

// Удаляем 'website'
store.remove('website');

// Полная очистка
store.clear();

Вдобавок есть ещё и такие возможности:

// Сохраняем объект; используется JSON.stringify
store.set('website', {
  name: 'SitePoint',
  loves: 'CSS'
});

// Извлечение объекта; используется JSON.parse
var website = store.get('website');
console.log(website.name + ' loves ' + website.loves);

// Получаем все сохранённые данные
console.log(store.getAll());

// Цикл по всем данным в хранилище
store.forEach(function(key, val) {
  console.log(key, val);
});

В README на GitHub есть множество других подробностей, которые касаются браузерной поддержки, потенциальных багов и так далее.

lscache

lscache очередная библиотека для работы с localStorage, однако в ней есть несколько особых фишек. Вы можете работать как с localStorage API, а так же имитировать работу с Memcached.

Пример:

// сохранить на 2 минуты
lscache.set('greeting', 'Hello World!', 2);

// извлечение по ключу
console.log(lscache.get('greeting'));

// удаление по ключу
lscache.remove('greeting');

// очистка хранилища
lscache.flush();

// очистка по времени
lscache.flushExpired();

Как и в предыдущем примере, библиотека заботится о сериализации. Это значит, что мы можем взаимодействовать и с объектами:

lscache.set('website', {
  'name': 'SitePoint',
  'category': 'CSS'
}, 4);

// получаем данные объекта
console.log(lscache.get('website').name);
console.log(lscache.get('website').category);

И наконец, мы можем помещать данные в специальные “бакиты”. Взгляните на пример:

lscache.set('website', 'SitePoint', 2);
console.log(lscache.get('website')); // 'SitePoint'

lscache.setBucket('other');
console.log(lscache.get('website')); // null

lscache.resetBucket();
console.log(lscache.get('website')); // 'SitePoint'

Обратите внимание на второй вызов, где мы получаем null. Это произошло потому что я вывел данные до определения бакита. После определения бакита все данные будут сохраняться в нём, как в отдельной секции. Теперь всё взаимодействие с данными будет осуществляться внутри бакита до тех пор пока его не сбросить или не переключиться на другой.

secStore.js

secStore.js отличается от аналогов специальным механизмом шифрования для обеспечения безопасности данных (Stanford Javascript Crypto Library). Так же secStore.js позволяет выбрать метод хранения: localStorage, sessionStorage, или cookies. Для работы secStore.js необходимо так же подключить библиотеку sjcl.js.

Вот пример сохранения зашифрованных данных:

var storage = new secStore;
var options = {
    encrypt: true,
      data: {
        key: 'data goes here'
      }
    };

storage.set(options, function(err, results) {
  if (err) throw err;
  console.log(results);
});

Обратите внимание, что при вызове метода set() мы так же указываем колбэк для обработки результатов. Для получения данных можем воспользоваться методом get():

storage.get(options, function(err, results) {
  if (err) throw err;
  console.log(results.key); // Выводит: "data goes here"
});

Если же вы хотите использовать session storage или cookies, то укажите это в настройках:

var options = {
  encrypt: true,
  storage: 'session', // or 'cookies'
  data: {
    key: 'data here'
  }
};

localForage

Разработчиком данной библиотеки является Mozilla. API очень прост, но в нём используются асинхронные механизмы, работающие благодаря IndexedDB или WebSQL. API такое же, как localStorage (getItem(), setItem(), и т.д.), отличается только синтаксис.

У нас есть возможность предоставления колбэков, которые будут вызываться при не успешных действиях:

localforage.setItem('key', 'value', function(err, value) {
  console.log(value);
});

localforage.getItem('key', function(err, value) {
  if (err) {
    console.error('error message...');
  } else {
    console.log(value);
  }
});

Ещё несколько особенностей localForage:

• Поддержка использования обещаний JavaScript
• Возможность работы не только со строками, но так же с объектами
• Предоставление базовой информации через метод config()

Basil.js

Basil.js описывается как нечто среднее между localStorage, sessionStorage и cookie API. Основные операции:

basil = new Basil(options);

basil.set('foo', 'bar');
basil.get('foo');
basil.remove('foo');
basil.reset();

Так же можно осуществить проверку доступности localStorage в браузере:

basil.check('local'); // возвращает Boolean

Basil.js так же позволяет использовать cookies или sessionStorage:

basil.cookie.set(key, value, {
  'expireDays': days, 'domain': 'mydomain.com'
});
basil.cookie.get(key);

basil.sessionStorage.set(key, value);
basil.sessionStorage.get(key);

Для настройки библиотеки можете сформировать объект настроек, состоящий из следующих полей:

• Пространство имён для работы с разными сегментами данных
• Приоритет работы различных методов хранения данных
• Название метода, используемого по умолчанию
• Указать время истечения кукисов.

options = {
  namespace: 'foo',
  storages: ['cookie', 'local'],
  storage: 'cookie',
  expireDays: 31
};

lz-string

lz-string позволяет сохранять огромное количество данных в localStorage благодаря их сжатию. Пример:

var string = 'A string to test our compression.';
console.log(string.length); // 33
var compressed = LZString.compress(string);
console.log(compressed.length); // 18
string = LZString.decompress(compressed);

Обратите внимание на использование методов compress() и decompress(). В комментариях можно увидеть как отличается длина строки до сжатия и после. Очень полезная фишка, ведь вместимость хранилища не безгранично.