Advance Features of HTML

HTML geolocation

A new feature that was introduced in HTML is that of access to geolocation information. Using this features it is possible to get the location of the users. This feature can be useful for providing targeted content to the user and to find out where the websites users are. The feature allows access to the users geographical location. As there are privacy concerns regarding having access to this information the location is only available with expressed permission from the user. When the user is using a device with a GPS receiver and has approved its use for reporting geolocation then the accuracy of the geolocation is much improved.

The navigation.geolocation objects provides access to the geolocation of the user. To obtain the user's geographical location, the getCurrentPosition method is used. This starts an asynchronous request to detect the user's location. The request queries the positioning hardware to get a up-to-date location. When the location is determined, the defined callback function is invoked. The function that is called is passed a single argument. The argument contains the location information. To get access to the information the attribute position.coords.latitude and position.coords.longitube are used which retrieve the latitude and longitude of the users location (assuming that the arguments passed to the function is called position).

The information from the location can then be used for any manner of things. In the example below the user's location is used in a Google map.

Watching the current location

If the location data changes it is possible to set up a callback function that is called with that updated position information. This is done using the watchPosition function, the function behaves in much the same manner as getCurrentPosition. The callback function is called multiple times, allowing the browser to either update your location as the device move.

Local storage

HTML5 local storage makes it possible to store values in the browser which can survive the browser session. Prior to local storage data that was need to survive browser sessions had to be stored in cookies. Cookies have limitations on size and produce a performance hit. Local storage is a new specification in HTML. It is not part of the HTML5 specification, but as it is becoming an important feature in web development it is worth mentioning.

Local storage provides a simple storage mechanism that allows a key/value pair to be stored. A key/value store can be considered like a dictionary; a key is associated with some value. Local storage provides two storage types local storage and session storage. The local storage type stores key/value pairs without an expiration date, the key/value is saved until the web site deletes the data. The session storage type stores data only for one session, the data is deleted when the user ends the session by closing the browser. Not all browsers support local storage so any webpage that uses this feature should provide a fallback. Below is an example of the local storage type, the example sets a value in the local storage for the key module and gives it the value COMP1021. To set a key value the localstorage.setItem method is used. To retrieve a value from the local storage the localstorage.getItem method is used.

The example below does not set the value for the key module but because the key is stored in the local storage the value can be retrieved.

Session storage

Session storage is almost exacly the same as local storage only that the data only persists for the current sessions. The only different in the syntax is that instead of using the localStorage object the sessionStorage object is used instead. The example below demonstrates this.

The example below does not set the value for the key module but because the key is stored in the session storage the value can be retrieved.

The following example is inspired by the w3school example.

A variety of other advanced HTML features can be explored at HTML Dog InterviewBit