HTML5 API – Local Storage, Geolocation & Offline Cache Manifest

LOCAL STORAGE

Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

Web is stateless

The main problem with HTTP as the main transport layer of the Web is that it is stateless.

This means that when you use an application and then close it, its state will be reset the next time you open it.

Normally, this is done server-side, and you would check the username to know which state to revert to. But what if you don’t want to force people to sign up?
This is where local storage comes in. You would keep a key on the user’s computer and read it out when the user returns.

USING LOCAL STORAGE IN HTML5-CAPABLE BROWSERS

To use localStorage, all you have to do is modify the localStorage object in JavaScript.

You can do that directly or (and this is probably cleaner) use the setItem() and getItem() method:

localStorage.setItem('favoriteColor','vlue');

If you read out the ‘favoriteColor’ key, you will get back “blue”:

var color = localStorage.getItem('favoriteColor'); // -> “blue"

To remove the item, you can use — can you guess? — the removeItem() method:

In the example above we use the returned latitude and longitude data to show the location in a Google map.

OFFLINE CACHE MANIFEST

What is Application Cache?

HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.

OFFLINE CACHE MANIFEST

Application cache gives an application three advantages:

Offline browsing – users can use the application when they’re offline

Speed – cached resources load faster

Reduced server load – the browser will only download updated/changed resources
from the server

CACHE MANIFEST BASICS

To enable application cache, include the manifest attribute in the document’s <html> tag:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

Every page with the manifest attribute specified will be cached when the user visits it. If the manifest attribute is not specified, the page will not be cached (unless the page is specified directly in the manifest file).