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 Cache = Web Storage's LocalStorage? (SO 10986026), Application Cache is a Douchebag (A List Apart)

My AIM is to build a website with specific pages be allowed offline to user on user demand.

Steps followed :

• I opened a site on Chrome : http://www.spritecow.com/
  And checked AppCache : chrome://appcache-internals/
  And the site was cached.

• I closed Chrome and reloaded it. The cache was still there. Exactly what I need for offline browsing

• Now how is this different from local storage? Tried to find the difference but all sites answer in purpose, i.e. AppCache for templates' caching and Local Storage for content within the template.

• Certain sites do not prefer AppCache as it reloads entire cache for a single line change. Certain sites prefer only local storage. While some go for the combo of AppCache(template) and Localstorage.

Now the doubt is :

• Local storage stores on client machine. How does AppCache storage is different if I can still access it even browser is closed.

• As clearing cache will clear AppCache then i'd go for only Local Storage.

• What is the best practice to be followed for offline browsing? I am completely new to this and need a little clarity on the same

---

EDIT

The doubt is not answered by the link (Is AppCache = Application Cache = Web Storage's LocalStorage?) as this gives difference but not based on the purpose of Offline Browsing Practices (which is the aim for this doubt).

Retinoscope

Possible duplicate of Is AppCache = Application Cache = Web Storage's LocalStorage? – Foy

The question you linked to explains quite clearly why these are different. Was there something specific there that you need clarity on? – Foy

Yes, For local storage, it stores data for a longtime period even if the browser get closed. For AppCache, it is used to store the whole web-app in the browser to make it available even if the client has no internet connection at all. But to set offline browsing I am planning to use only Local Storage, while some suggest AppCache is the way to go for templates part of the website – Retinoscope

I think they can be both used for your purpose. The difference mostly lie on how you are able to use it. The LocalStorage can be much more flexible as it is controlled programmatically, while AppCache uses a static manifest file to declare how and what should be cached. Using AppCache is easier than using LocalStorage just considering caching. All you need to do is to list out the things that needs to be cached, and you can define things such as a fallback. All the logical parts are left to the browser. – Enterprise

Answer 1

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);
}

Fayth

Thanks Miam, my concern with this concept lies with the fact that clearing just the cache will clear AppCache and thus the template and resource files while the local storage will still be holding the content. I was looking if there is a better practice for sync between both – Retinoscope

Mmmh... clearing cache only will not clear the LocalStorage (LS), but clearing all cached data (cookies, history,...) will. So it depends. But anyway you can use a version number as a JS variable (by parsing the manifest manually or simply setting a JS constant) and use it as a localStorage value to detect a difference between both. Or for Chrome >=22, you can access the manifest version with this (developer.chrome.com/extensions/runtime#method-getManifest). But don't forget a fallback for browsers that don't support this method. – Fayth

Answer 2

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.

Laevorotation

if you have loaded the JS file once, browser will cache it automatically.So even if you close and reopen the browser, js will be loaded from cache. – Lacey