HTML5 Local Storage VS App Cache Offline Website Browsing

Question

After going through multiple articles, I am still not clear on the difference between Local Storage and App Cache Manifest.

Also referred: Is AppCache = Application Cach

Answer 1

Appcache will even work if you are totally offline and your browser is closed and then you open your browser and type in the URL while still offline — the page loads! Check this site here … load it once while online and then disconnect from the Internet and close your browser … and then reopen browser and try to visit it while still offline.

localStorage needs connection first to load the js code needed to get the data from it.

Answer 2

AppCache use a manifest file to define what files used by the app should be stored (You can cache files and ressources like HTML pages, JS scripts, CSS styles, images,...)

LocalStorage will store data but not pages. So every javascript object that you can stringify can be stored in the localStorage.

So AppCache and localStorage aren't the same, but they are complementary.

Example

Imagine a web calendar that you want to be available offline (note: for this example, we use here a static page and data are loaded with javascript. The same can be made from a dynamic page, but this example use static).

The appcache will store the html page and the ressources that it uses (javascripts, css, images) to render you page. As you have put in your manifest file everything to be cached for the next offline access, the pages are stored and you'll be able to display your page offline at the next visit.

But problem, your calendar is displayed but is empty. All meetings and events of the month aren't there. This is because your page is stored, but you still need network to load the meetings in your calendar. And as you're offline, you have no network...

If you want to have all your meetings available offline too, you'll have to store them in the localstorage (not in the appCache, because it's not a page, it's data accessed by JavaScript.) So you will need to change your Javascript function from this :

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

to this

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