How To Use HTML5 Offline Storage In Your Website

By . Filed in Web Design

Apart from new elements in HTML5, this new web technology offers us Offline Storage. There are a number types of offline storage, and in this article we will specifically discuss sessionStorage and localStorage. Offline Storage allows us to save data in the user’s browser and makes our web apps or games work without a connection (for a period of time).

In a real world example, developers can take the advantage of Offline Storage as a backup in case Internet connection is not available. They can then send the data up to the online server when they regain connectivity.

HTL5 Offline Storage

If you are asking yourself how to utilize this browser’s feature into your website, check out this article.

sessionStorage

sessionStorage is a form of storage that stores data temporarily in the browser. The data in sessionStorage is set in key and value pairing, and it is exclusive to the browser window or tab. As long as the browser or the tab is still open, the data would still be there, unless we erase it intentionally or we quit the browser.

To store a data in sessionStorage, we can use .setItem(). Here is one example where we store “Hello World”.

sessionStorage.setItem("keyExample", "Hello World");

Alternatively, we can also do the following. This will create a data entry with anotherKeyName as the key and ‘Hello Too’ as the value.

sessionStorage.anotherKeyExample = "Hello Too";

In Webkit-based browsers such as Safari, Chrome and Opera, you can see the data under the Resources tab. In Firefox, you can search the data that resides under the Firebug DOM tab.

It is worth noting that sessionStorage can only store a string or plain text. An integer will be translated to string.

If you have JSON data you will have to format it to string using JSON.stringify() and retrieve it using JSON.parse() to convert the string back as JSON. Below are a few code examples:

var json = JSON.stringify({[1, 2, 3]});
sessionStorage.anotherKeyExample = json;

Retrieving data in sesssionStorage

We also have two ways to retrieve the data from sessionStorage. First, we can use the .getItem() or by directly pointing the key name, as follows.

var a = sessionStorage.getItem("keyExample");
var b = sessionStorage.anotherKeyExample;

Deleting data in sessionStorage

As mentioned above, the data in sessionStorage will be deleted when the user closes the browser’s window or tab. But we can also delete it intentionally. We can use the .removeItem() method or delete directive, like so.

sessionStorage.removeItem("keyExample");
delete sessionStorage.anotherKeyExample;

localStorage

We can also store data in the browser in a form of localStorage. But unlike sessionStorage, localStorage data is persistent; the data will remain in the browser as long as we do not intentionally remove it.

Storing the data in localStorage is as easy as we did in sessionStorage. In fact, the technicalities are all the same, except we now use localStorage object. We can input a data entry, with the.setItem() method or directly setting it with the key name, like so.

localStorage.setItem("keyName", "Hello, Local Storage");
localStorage.anotherKeyName = 1;

We retrieve the data with .getItem() method.

var c = localStorage.getItem("keyName");
var d = localStorage.anotherKeyName

Similarly we can remove data entry from localStroge with .removeItem() method and delete directive.

Offline Storage Limit Size

Both sessionStorage and localStorage have limits in terms of max capacity, and each browser has its own limit. Firefox, Chrome, and Opera limit is 5MB per domain. Internet Explorer offers more space with 10MB per domain. So ensure that your data will not exceed the limit. If your data exceeds the limit, you might want to consider the other alternative, such as SQLite.

Feature Detection

In addition, even though that support for sessionStorage and localStorage is quite great (IE8 supports them), you might still want to run browser feature detection before running a function that posts an entry to sessionStorage or localStorage. This is so that you can add a fallback function like with Cookies in case the browser does not support Offline Storage form.

You can use Modernizr for doing so or wrap your script with this conditional statement, like so.

if ( window.localStorage ) {
	
} else {
	alert('localStorage is not available');
}

Conclusion

Offline Storage is a really great feature that makes it possible for web apps and games to work offline. In the past we have also shown you how to utilize it in real examples.

I hope that this short article could help you get started with Offline Storage.

Author:

Thoriq has been dabbling in Web Design for 5 years and appreciates the giving nature of the web design community at large. He loves trying new things in CSS3 and HTML5. Apart from writing on hongkiat.com he also maintains creatiface.

Tags:

Advertisement