Храня данные на клиенте

Существует несколько путей к веб-приложению или веб-сайту, чтобы хранить данные на клиенте. Можно использовать классы базы данных JavaScript, описанные в Хранении Клиентской стороны Safari и Оффлайновом Руководстве по программированию Приложений, для хранения данных приложения, или использовать кэш приложения HTML5 для хранения ресурсов на клиенте, таким образом, веб-страницы продолжают отображать оффлайн, когда нет никакого сетевого соединения на рабочем столе и iOS. Когда существует медленное сетевое соединение, можно также использовать кэш приложения для загрузки веб-страниц быстрее. В этой главе описываются, как хранить данные локально с помощью этого кэша приложения HTML5.

Для хранения ресурсов на клиенте сначала, Вы создаете файл манифеста, указывающий который ресурсы кэшироваться. Вы объявляете файл манифеста в основном файле HTML. Тогда Вы управляете кэшем и обрабатываете связанные события с помощью JavaScript. Веб-страницы, ранее загруженные и содержащие ресурсы, которые Вы указываете, продолжают отображать правильно, когда нет никакой сети. Кэш приложения также сохраняется между сеансами браузера. Так, веб-приложение, ранее использовавшееся на компьютере или устройстве, может продолжать работать оффлайн — например, когда iOS не имеет никакой сети или находится в авиарежиме.

Создание файла манифеста

Файл манифеста указывает ресурсы — такие как HTML, JavaScript, CSS и файлы образа — к загруженному и хранилищу в кэше приложения. После в первый раз, когда веб-страница загружается, ресурсы, указанные в файле манифеста, получены из кэша приложения, не веб-сервера.

Файл манифеста имеет следующие атрибуты:

Например, Перечисление 10-1 показывает файл манифеста, содержащий URLs к некоторым ресурсам изображения.

  Демонстрационный файл манифеста перечисления 10-1

CACHE MANIFEST
 
demoimages/clownfish.jpg
demoimages/clownfishsmall.jpg
demoimages/flowingrock.jpg
demoimages/flowingrocksmall.jpg
demoimages/stones.jpg
demoimages/stonessmall.jpg

Объявление файла манифеста

После создания файла манифеста, необходимо объявить его в файле HTML. Вы делаете это путем добавления a manifest припишите <html> тег следующим образом:

<html manifest="demo.manifest">

Параметр manifest атрибут является относительным или абсолютным путем к файлу манифеста.

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

Обновление кэша

Можно ожидать кэша приложения, чтобы обновить автоматически или инициировать обновление с помощью JavaScript. Кэш приложения автоматически обновляет, только если изменяется файл манифеста. Если ресурсы перечислили в изменении файла манифеста, это автоматически не обновляет. Файл манифеста считают неизменным, если это - байт для байта то же; поэтому, изменение даты модификации файла манифеста также не инициировало обновление. Если это не достаточно для Вашего приложения, можно обновить кэш приложения явно с помощью JavaScript.

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

Используйте следующий класс JavaScript, чтобы инициировать обновление к кэшу приложения и проверить его состояние. Существует один кэш приложения на документ, представленный экземпляром DOMApplicationCache класс. Кэш приложения является свойством DOMWindow объект.

Например, Вы добираетесь DOMApplicationCache объект следующим образом:

cache = window.applicationCache;

Можно проверить состояние кэша приложения следующим образом:

if (window.applicationCache.status == window.applicationCache.UPDATEREADY)...

Если кэш приложения находится в UPDATEREADY состояние, тогда можно обновить его путем отправки его update() сообщение следующим образом:

window.applicationCache.update();

Если обновление успешно, подкачайте старые и новые кэши следующим образом:

window.applicationCache.swapCache();

Кэш готов использовать, когда он возвращается к UPDATEREADY состояние. См. документацию для DOMApplicationCache для других значений состояния. Снова, только веб-страницы загрузились после использования обновления новый кэш, не веб-страницы, в настоящее время выводящиеся на экран браузером.

Обработка событий кэша

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

Например, регистр для updateready событие, которое будет уведомлено, когда кэш приложения готов быть обновленным. Кроме того, зарегистрируйтесь для error событие для принятия некоторых мер, если процесс обновления перестал работать — например, зарегистрируйте сообщение об ошибке с помощью консоли.

cache = window.applicationCache;
cache.addEventListener('updateready', cacheUpdatereadyListener, false);
cache.addEventListener('error', cacheErrorListener, false);

См. документацию для DOMApplicationCache для полного списка типов событий.