At the heart of every web application is one thing – data – and the aims of every web application is the same: present data to the application user; allow the user to add, update or delete data; save the data for future use. For the sever based application developer this is all fairly straight forward – techniques such as using PHP with a MySQL database are simple and well understood.
However, for the client only web application the situation is slightly different and they have two problems that they must overcome: data must be structured and stored in such a way that it can be handled effectively by the application; the data may need to be stored for use at a later date. The obvious solution is a client-side database that can be accessed from the browser by Javascript. The obvious question is 'How?'.
Browser Databases
If a developer is creating a web application for a specific audience then they may be able to make use of an HTML5 SQL database. However, even though most web browsers are becoming increasingly HTML5 compliant not all have implemented the HTML5 SQL databases and some don't intend to do so. Therefore, it is possible, for example, to write an HTML5 database application for Chrome but this would not work with Firefox (and probably never will).
The developer must, therefore, find a consistent method of working with structured data and one solution is to use JSON (or JavaScript Object Notation) with Web Storage.
JavaScript Object Notation
Javascript Object Notation is a simple, but effective, way of defining a data object. For example:
var data = {
description: "A Javascript example",
users: [
{firstname:"fred",surname:"smith",
phone: {mobile:"555-1234", home:"555-2345"}},
{firstname:"jane",surname:"jones",
phone: {mobile:"555-3456", home:"555-4567"}}]
};
Here the object consists of: a text description; an array containing user details. It's then very easy to output the data to the screen:
document.write(data.description + "< br / >");
for (var i=0; i
document.write(data.users[i].surname + ":" + data.users[i].phone.home + "< br / >");
The next step is to store this data on the client PC.
Web Storage
The current versions of the most popular browsers (IE8, Firefox, Opera, Safari and Chrome) all support web (or DOM) storage which enables the developer to store data on a per web page level (session storage) or a per domain level (local storage).
However, this only allows for text keys and strings to be stored in an associative array, for example:
localStorage.appName = 'My first web application';
It does not allow arrays to be saved. Fortunately JSON has a solution – the stringify function:
localStorage.data = JSON.stringify (data);
This will store the JSON object as a string which can then be accessed by other web pages (but only from the same domain):
var new_data = JSON.parse(localStorage.data);
document.write(new_data.description + "< br / >");
In this way the developer is able to work with structured data and then to store that data on the client computer.
Mark Alexander Bain - Mark Alexander Bain is a writer, Mo Bro and consultant for all aspects of software development at dsquared. He has also written regularly ...
