HTML5 API – LOCAL STORAGE, GEOLOCATION & OFFLINE CACHE MANIFEST
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:
localStorage.removeItem('favoriteColor');
var color = localStorage.getItem('favoriteColor'); // -> null
That’s it! You can also use sessionStorage instead of localStorage if you want the data to be maintained only until the browser window closes.
GEOLOCATION
Geolocation is the process or technique of identifying the geographical location of a person or device by means of digital information processed via the Internet.
The HTML Geolocation API is used to get the geographical position of a user. Since this can compromise user privacy, the position is not available unless the user approves it.
USING HTML GEOLOCATION
Use the getCurrentPosition() method to get the user's position. The example below is a simple Geolocation example returning the latitude and longitude of the user's position:
var x = document.getElementById(“demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
DISPLAYING THE RESULT IN A MAP
To display the result in a map, you need access to a map service that can use latitude and longitude, like Google Maps:
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML =
"<img src='"+img_url+"'>";
}
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).
The recommended file extension for manifest files is: .appcache