HTML5 Локальное хранилище VS App Cache Offline Просмотр веб-сайта

После прохождения нескольких статей, Я все еще не понимаю разницу между локальным хранилищем и манифестом кэша приложений.

Также упоминается: Является ли AppCache = кэш приложения = веб-хранилище LocalStorage? (SO 10986026), Кэш приложения - Douchebag (A List Apart)

"Моя AIM" - это создание веб-сайта со специальными страницами, которые могут быть отключены пользователем по запросу пользователя.

Последовали следующие шаги:

  • Я открыл сайт в Chrome: http://www.spritecow.com/
    И проверили AppCache: chrome://appcache-internals/
    И сайт был кэширован.

  • Я закрыл Chrome и перезагрузил его. Кэш все еще был там. То, что мне нужно для автономного просмотра

  • Теперь, как это отличается от локального хранилища? Пробовал найти разницу, но все сайты отвечают цели, то есть AppCache для кэширования шаблонов и локального хранилища для контента в шаблоне.

  • Некоторые сайты не предпочитают AppCache, так как он перезагружает весь кеш для изменения одной строки. Некоторые сайты предпочитают только локальное хранилище. Хотя некоторые идут на комбо AppCache (шаблон) и Localstorage.

Теперь возникает сомнение:

  • Локальные хранилища хранятся на клиентской машине. Как хранилище AppCache отличается, если я могу получить к нему доступ, даже браузер закрыт.

  • Как очищающий кеш очистит AppCache, тогда я перейду только к локальному хранилищу.

  • Какова наилучшая практика для автономного просмотра? Я совершенно новичок в этом и нуждаюсь в небольшой ясности в отношении того же

ИЗМЕНИТЬ

На сомнение не ответила ссылка (Является ли AppCache = Application Cache = LocalStorage для веб-хранилища?), так как это дает разницу, но не зависит от цели автономного просмотра Практика (которая является целью для этого сомнения).

Ответы

Ответ 1

AppCache используйте файл манифеста, чтобы определить, какие файлы, используемые приложением, должны быть сохранены (вы можете кэшировать файлы и ресурсы, такие как HTML-страницы, сценарии JS, стили CSS, изображения,...)

LocalStorage будет хранить данные, но не страницы. Поэтому каждый объект javascript, который вы можете стягивать, может быть сохранен в localStorage.

Итак, AppCache и localStorage не совпадают, но они дополняют друг друга.

Пример

Представьте себе веб-календарь, который вы хотите использовать в автономном режиме (обратите внимание: в этом примере мы используем здесь статическую страницу, а данные загружаются с помощью javascript. То же самое можно сделать с динамической страницы, но в этом примере используйте static).

Appcache сохранит страницу html и используемые им ресурсы (javascripts, css, images), чтобы отобразить страницу. Поскольку вы добавили в свой файл манифеста все, что нужно кэшировать для следующего автономного доступа, страницы хранятся, и вы сможете отображать свою страницу в автономном режиме при следующем посещении.

Но проблема, ваш календарь отображается, но пуст. Всех встреч и событий месяца нет. Это связано с тем, что ваша страница хранится, но вам все равно нужна сеть для загрузки собраний в вашем календаре. И поскольку вы в автономном режиме, у вас нет сети...

Если вы хотите, чтобы все ваши собрания были доступны в автономном режиме, вам придется хранить их в localstorage (а не в appCache, потому что это не страница, доступ к которой осуществляется с помощью JavaScript). Поэтому вам нужно будет изменить свою функцию Javascript:

function initApp() {
  var data = loadDataWithAjax();
  renderPlanning(data);
}

к этому

function initApp () {
  var data;
  if(offline) {
    data = loadFromLocalStorage();
  } else {
    data = loadDataWithAjax();
    storeDataInLocalStorage(data);
  }
  renderPlanning(data);
}

Ответ 2

Appcache даже будет работать, если вы полностью отключены, а ваш браузер закрыт, а затем вы откроете свой браузер и введите URL-адрес, пока он еще находится в автономном режиме — страница загружается! Проверьте этот сайт здесь & hellip; загрузите его один раз в режиме онлайн, а затем отключите от Интернета и закройте свой браузер & hellip; а затем снова запустите браузер и попробуйте посетить его, пока он не находится в автономном режиме.

localStorage сначала требует подключения для загрузки кода js, необходимого для получения данных из него.