localForage – храним данные offline без головной боли. Удобная абстракция над IndexedDB, WebSQL и localStorage.

localforage

Большинство современных веб-приложений каким-либо образом хранят отдельные данные у клиента, пользуясь такими средствами как localStorage, WebSQL или IndexedDB. Так, например, для небольших HTML5-игр весьма удобно хранить результаты игрока локально: не нужно описывать взаимодействие с базами данных, а, сохранив все локально, игрок легко может продолжить прогресс с места своего сохранения.

Однако, несмотря на удобство, возникает проблема: хранилища реализуют схожий функционал, но методы, предлагаемые API, весьма различаются. Это создает проблемы конечному разработчику, который вынужден держать в голове список всех функций, их аргументов и т.д. Помимо этого, каждое хранилище имеет свои достоинства и недостатки, что также сказывается на разработке. По этой причине Mozilla представила свою библиотеку localForage, позволяющую забыть о таких мелочах и сосредоточиться на реализации функционала. Рассмотрим ее возможности подробнее.

Установка localForage

localForage может быть установлен двумя способами: при помощи bower либо напрямую, скачав непосредственно минифицированную версию скрипта:

bash

bower install localforage

Работа с данными

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

  • Array
  • ArrayBuffer
  • Blob
  • Float32Array
  • Float64Array
  • Int8Array
  • Int16Array
  • Int32Array
  • Number
  • Object
  • Uint8Array
  • Uint8ClampedArray
  • Uint16Array
  • Uint32Array
  • String

Для добавления и получения информации по некоторому ключу мы можем воспользоваться интуитивными методами setItem и getItem:

javascript

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

Также легко мы можем удалить элементы по ключу:

javascript

localforage.removeItem('key', function(err) {
    console.log('Key is cleared!');
});

Помимо этого, мы можем очистить все хранилище, получить его размер, ключи, а также провести итерацию по всем ключам/значениям.

Настройка localForage

Простейшим образом мы можем указать список предпочитаемых хранилищ, используемых библиотекой:

javascript

localforage.setDriver(localforage.LOCALSTORAGE);

Таким образом, мы указываем список предпочитаемых хранилищ

javascript

localforage.setDriver([localforage.WEBSQL, localforage.INDEXEDDB]);

Также мы можем указать название хранилища, его размер, версию и описание, воспользовавшись функцией localforage.config( ... )

Использование своих драйверов для localforage

Если вас не устраивают хранилища, предлагаемые по умолчанию, Вы можете добавить свой драйвер:

javascript

var myCustomDriver = {
    _driver: 'customDriverUniqueName',
    _initStorage: function(options) {
       // Реализация ...
    },
    clear: function(callback) {
       // Реализация ...
    },
    getItem: function(key, callback) {
       // Реализация ...
    },
    key: function(n, callback) {
       // Реализация ...
    },
    keys: function(callback) {
       // Реализация ...
    },
    length: function(callback) {
       // Реализация ...
    },
    removeItem: function(key, callback) {
       // Реализация ...
    },
    setItem: function(key, value, callback) {
       // Реализация ...
    }
}

Мы добавляем свой драйвер, после чего можем его использовать

javascript

localforage.defineDriver(myCustomDriver);

Заключение

Таким образом, localForage является удобной оберткой над хранилищами WebSQL, IndexedDB и localStorage, отделяя работу с хранилищами от непосредственной работы с данными, хранимыми offline.

Метки: , , , , ,
8 комментариев на “localForage – храним данные offline без головной боли. Удобная абстракция над IndexedDB, WebSQL и localStorage.
  1. Крутая штука! Кстати, есть еще плагин для бэкбона, что-бы синхронизоровать модели и коллекции с localForage.

    var MyModel = Backbone.Model.extend({
        sync: Backbone.localforage.sync('MyModel')
    });
    
    var MyCollection = Backbone.Collection.extend({
        model: MyModel,
        sync: Backbone.localforage.sync('MyCollection')
    });
    

    This library lets you override the sync() method on your collections and models so they’re saved to localForage instead of a REST server. Simply override your objects’ sync() method with the namespace for your model:

    Подробнее тут:

    https://github.com/mozilla/localForage-backbone

  2. Виктор пишет:

    Опечатка: “отделяя работу с хранилищами от непосредственной работой с данными”

  3. Дмитрий пишет:

    localforage.setDriver([localforage.WEBSQL, localforage.INDEXEDDB]);

    Мы передаем массив драйверов. В дальнейшем использовании, при добавлении новой записи, библиотека сама решает куда записать данные, в какое из хранилищ?

  4. Dm9 пишет:

    Здравствуйте. Было бы здорово описать доступный размер данных для получившегося “композитного” хранилища. По крайней мере, минимальный порог для актуальных браузеров и устройств для списка хранилищ по умолчанию.

  5. XOP пишет:

    Сделайте пожалуйста версию для печати. Очень не хватает.

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

* Copy This Password *

* Type Or Paste Password Here *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Узнавай о новых статьях первым!

Спасибо за лайк в FACEBOOK
Подписывайтесь на новости вконтакте
Последние статьи от html5.by