AppCache vs. Web Storage vs. Cookie

The Question

I would like to reduce loading time on my website by saving some pages and data into local client. There are AppCache, Web Storage and Cookie availble on the mordern browsers. What are the difference between them?

Answer

AppCache

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,...)

The details about AppCache can be found here.

Web Storage

Web Stroage will store data but not pages. There are two main web storage types: localStorage and sessionStorage. Max size for localStorage is 5MB per domain and for sessionStorage is limited only by system memory. The data type for web storage is string only, as key-value pairs, so every javascript object that you can stringify can be stored in the localStorage.

In addition, localStorage has no expiration date, and gets cleared only through JavaScript, or clearing the Browser Cache / Locally Stored Data. sessionStorage survives only as long as its originating window or tab.

More details about web storage.

Cookie

Cookie are primarily for reading server-side. Domain cookies are sent with every HTTP request to that domain, which consumes bandwidth.

Cookies give you a limit of 4096 bytes per cookie and it is allowed to expire after a session.