The Geolocation API of HTML5 helps in identifying the user’s location, which can be used to provide location specific information or route navigation details to the user.
Using geolocation - Web APIs | MDN
The geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.
The geolocation object
The geolocation API is published through the navigator.geolocation object.
Locate the User’s Position
The HTML Geolocation API is used to get the geographical position of a user.
Since this can compromise privacy, the position is not available unless the user approves it.
Using HTML Geolocation
The getCurrentPosition() method is used to return the user’s position.
The example below returns the latitude and longitude of the user’s position
Handling Errors and Rejections
The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user’s location
Displaying the Result in a Map
To display the result in a map, you need access to a map service, like Google Maps.
In the example below, the returned latitude and longitude is used to show the location in a Google Map (using a static image)
This page has demonstrated how to show a user’s position on a map.
Geolocation is also very useful for location-specific information, like:
Up-to-date local information
Showing Points-of-interest near the user
Turn-by-turn navigation (GPS)
Client-Side Storage - HTML5 Rocks
This is an overview of client-side storage, a general term for several separate but related APIs: Web Storage, Web SQL Database, Indexed Database, and File Access. Each of these techniques provides a distinct way to store data on the user’s hard drive, instead of the server, where data usually resides. There are two main reasons to do this: (a) to make the web app available offline; (b) to improve performance. For a detailed explanation of the use cases for client-side storage, see the HTML5Rocks article, “Offline”: What does it mean and why should I care?.
The APIs share a similar scope and similar principles. So let’s first understand what they have in common before launching to the specifics of each.
Building A Simple Cross-Browser Offline To-Do List With IndexedDB And WebSQL – Smashing Magazine