HTML5 Recipes: Storage 101

In this recipe, we shall take a look at a key feature of HTML5 that is key to making powerful web applications. The area we shall be discussing is storage i.e. how your web applications can store application specific data and retain that data even across browser instances.

Quite often, the complain against web applications is that they always need a connection to the server to function well. However, the reality of our world is that at times, you do not have a connection at all. The key to making your web application compelling vis-a-vis other native applications (desktop applications) is to ensure that large parts of your application are able to work even without a connection. Additionally, if there is server side data that seldom changes, it does not make sense to fetch it again and again, thereby wasting network bandwidth.

As a first step to make web applications work offline, we need a storage API that allows the application to store application specific data and use it as needed. For e.g. imagine you are writing a web based game and need to store the current moves in an application, so that if the user were to come later later to the application, you can replay back the moves. There are many such cases of storing data locally. Currently, we have been trying to achieve offline storage via cookies but that is not sufficient. For several reasons: The amount of data that you can store is very limited. And cookies are also sent with every request/response, thereby wasting network bandwidth. Enter the Storage API that comes under the umbrella of HTML5

The Storage API also known as the Local Storage API provides a key based storage with a simple API to go along with it. The amount of storage size allocated per domain is 5MB, which should be sufficient for most applications. There is also a SQL based storage available but we shall keep the discussion limited now to simple storage support in the form of key-based values.

In the code below, we shall write our first application that exercises the storage API in its simplest form. The two methods that we shall be looking at are the setItem and the getItem methods. The setItem takes two parameters: they key name and the key value. The getItem method as expected takes only one input i.e. the key value and it returns back the value if it is available i.e. set. Note that the setItem and getItem methods are not limited to just simple string values. In the next part of the series, we shall see how we can actually even store JSON Objects and get the values back.

Let us take a look at the code below:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Storage Test</title>
<script type="text/javascript">

function saveLocal(){
	if (window.localStorage) {
		localStorage.setItem("myvalue","Romin Irani");
		alert("We have saved the data locally.");
	} else {
		alert("Your Browser does not support LocalStorage.");
	}
}

function readLocal(){
	if (window.localStorage) {
		var val = localStorage.getItem("myvalue");
		alert(val);
	}else {
		alert("Your Browser does not support LocalStorage.");
	}
}

</script>
</head>
<body>
<div id="main">
	<input type="button" value="Save Values" onclick="saveLocal()"/>
	<input type="button" value="Read Values" onclick="readLocal()"/>
</div>
</body>
</html>

Let us break the code down now:

  • The application has two buttons to exercise the getItem and setItem methods of the storage API.
  • When you click the “Save Values” button, the saveLocal() method gets called. This method first checks if your browser supports localStorage. This is done by checking the window.localStorage object. If support is present, we invoke the setItem() method that sets a key named myvalue with a value.This data is then stored in the browsers local storage and will be available even across browser restarts. You can use any of the Browser developer settings to view the Local Storage. For e.g. in Google Chrome, go to Settings –> Tools –> Developer Tools. Then under Local Storage, you should be the domain listed from where you ran the sample i.e. either localhost or the link given below. Click the domain name and you should see our key-value listed over there.
  • Similarly, when you click the “Read Values” button, the readLocal() method is called. The method checks for localStorage support and then invokes the getItem() method to retrieve the value of the key that we set. The parameter passed to the getItem() method is the key name i.e. myvalue

See it in action here.

This recipe just touches the surface of the local storage available in a HTML5 supported browser. In future recipes, we shall see how we can store more complicated objects in the local storage.

We covered the localStorage object over here. There is also sessionStorage and the API mirrors that of localStorage i.e. getItem, setItem and so on. Except that, the values remain only for the browser session. Close the browser and come back later to your application and the values are gone. So you have a choice, sessionStorage or localStorage. For most cases, localStorage allows you to do much more and give the users an ability to come back to the application later with their current state saved.


HTML5 Storage Recipes

  1. Getting Started with Storage
  2. More on Storage

Back to HTML5 Series

 

Advertisements

One thought on “HTML5 Recipes: Storage 101

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s