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, необходимого для получения данных из него.