...

суббота, 15 февраля 2014 г.

[Перевод] LocalForage: кроссбраузерное локальное хранилище от Mozilla

Уже довольно давно у веб-приложений появилась возможность хранить часть данных или файлов локально. Можно даже кешировать MP3-файлы. Браузеры научились хранить немалые объёмы данных. Тем не менее, пока что технологии локального хранения сильно фрагментированы.

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


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


Почувствовать на своей шкуре все сложности работы с локальным хранилищем мне помогла разработка around — HTML5-клиента для Foursquare. Хотя в этой статье я рассказываю, как использовать localForage, возможно кто-то предпочтёт изучить реальные примеры работы с ней.


localForage — очень простая библиотека JavaScript, которая использует API, похожий на API localStorage, с теми же самыми базовыми методами get, set, remove, clear и length, но имеет ещё несколько важных улучшений:



  • асинхронный API с колбэками;

  • драйвера IndexedDB, WebSQL и localStorage (самый подходящий драйвер выбирается автоматически в зависимости от возможностей браузера);

  • поддержка блобов и произвольных форматов данных, так что можно хранить изображения, файлы и так далее;

  • поддержка обещаний ECMAScript 6.




Использование IndexedDB и WebSQL позволяет хранить намного больше данных, чем localStorage. Неблокирующий асинхронный API делает приложение более быстрым и отзывчивым, так как основной поток приложения не подвисает во время выполнения вызовов get/set. Поддержка обещаний позволяет писать чистый код без спагетти из колбэков. Конечно, если вы любите колбэки, можно использовать и их.



Хватит болтовни, покажите, как это работает!




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

// Это информация, которую мы хотим хранить локально
var config = {
fullName: document.getElementById('name').getAttribute('value'),
userId: document.getElementById('id').getAttribute('value')
};

// Сохранение конфигурации
localStorage.setItem('config', JSON.stringify(config));

// Восстановление при следующей загрузке приложения
var config = JSON.parse(localStorage.getItem('config'));




Обратите внимание, что localStorage хранит всю информацию в виде строк, поэтому приходится преобразовывать всё в сериализованный JSON.

Всё очень просто и логично, но сразу можно заметить несколько проблем:



  • Cинхронность. Приходится ждать, пока данные будут считаны с диска и обработаны парсером, какого бы размера они ни были. Это ухудшает отзывчивость приложения. Особенно плохо это на мобильных устройствах — блокируется главный потоrу выполнения, пока идёт обращение к данным, из-за чего приложение начинает казаться медленным и подвисающим.

  • Всё хранится в виде строк. Нам постоянно приходится использовать JSON.parse и JSON.stringify. Это потому, что localStorage умеет работать только со строками JavaScript. Никаких чисел, булевых значений, блобов и прочего. Это раздражает при необходимости хранить числа или массивы, а работу с бинарными данными делает практически невозможной (или, по крайней мере чудовищно медленной).




Упрощаем жизнь с помощь localForage




localForage решает обе эти проблемы с помощью API, очень похожего на интерфейс localStorage, но асинхронного. Сравните, насколько он проще эквивалентного кода для IndexedDB.

Код IndexedDB:



// IndexedDB.
var db;
var dbName = "dataspace";

var users = [ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'} ];

var request = indexedDB.open(dbName, 2);

request.onerror = function(event) {
// Обработка ошибок.
};
request.onupgradeneeded = function(event) {
db = event.target.result;

var objectStore = db.createObjectStore("users", { keyPath: "id" });

objectStore.createIndex("fullName", "fullName", { unique: false });

objectStore.transaction.oncomplete = function(event) {
var userObjectStore = db.transaction("users", "readwrite").objectStore("users");
}
};

// После того, как БД создана, добавим туда запись о пользователе

var transaction = db.transaction(["users"], "readwrite");

// Как-то отреагируем на окончание процесса записи в базу
transaction.oncomplete = function(event) {
console.log("All done!");
};

transaction.onerror = function(event) {
// Не забываем обрабатывать ошибки
};

var objectStore = transaction.objectStore("users");

for (var i in users) {
var request = objectStore.add(users[i]);
request.onsuccess = function(event) {
// Выведем в консоль информацию о каждом добавленном пользователе
console.log(event.target.result);
};
}


Код localForage:



// Сохраняем информацию о пользователях
var users = [ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'} ];
localForage.setItem('users', users, function(result) {
console.log(result);
});




Код с WebSQL будет несколько короче, чем код с IndexedDB, но всё равно потребует гораздо больше текста, чем с localForage.

Не только строки




Допустим, вы хотите использовать локально или не только текстовые данные о пользователе, но и его аватарку. С localForage это делается очень просто:

// Загружаем фотографию AJAX-запросом
var request = new XMLHttpRequest();

// Допустим, нам нужна фотогрфия пользователя с id=1
request.open('GET', "/users/1/profile_picture.jpg", true);
request.responseType = 'arraybuffer';

// Когда запрос завершится, сохраним фото локально
request.addEventListener('readystatechange', function() {
if (request.readyState === 4) { // readyState DONE
// Сохраняем данные как есть. С localStorage такое невозможно
localForage.setItem('user_1_photo', request.response, function() {
// Фото сохранилось, работаем дальше.
});
}
});

request.send();




Извлечь фотографию из хранилища можно с помощью всего трёх строк кода:

localForage.getItem('user_1_photo', function(photo) {
// Создаём data URI или ещё как-нибудь помещаем фото в тег img.
console.log(photo);
});




Колбэки и обещания




Если вы не любите колбэки, вы можете использовать обещания ES6. Вот так будет выглядеть последний пример, если переписать его с использованием обещаний:

localForage.getItem('user_1_photo').then(function(photo) {
// Создаём data URI или ещё как-нибудь помещаем фото в тег img.
console.log(photo);
});




Конечно, это искусственный и не слишком наглядный пример. Если вы хотите посмотреть на такой стиль программирования в реальном коде — вот подходящий фрагмент из around.

Кроссбраузерность




localForage поддерживает все современные браузеры. IndexedDB доступна во всех современных браузерах кроме Safari ((IE 10+, IE Mobile 10+, Firefox 10+, Firefox for Android 25+, Chrome 23+, Chrome for Android 32+, Opera 15+). Safari и штатный браузер Android (2.1+) используют WebSQL.

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


Библиотека ещё очень молода, часть функционала только планируется, так что присоединяйтесь к разработке, присылайте сообщения об ошибках и патчи, если хотите, чтобы библиотека умела делать больше!


This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.


Комментариев нет:

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