Introduction to HTML5 Storage

Introduction

 

HTML5 Storage provides a standard mechanism for local storage for key/value pairs of data, within the client web browser. The data persists locally and remains available even after you navigate away from the web site or close your browser too. It is widely supported in almost all browsers in their latest versions as of date.

 

Differences between HTML5 Storage and Cookies

 

HTML5 Storage	Cookies
Local Storage on the client browser	Transmitted with every Http request
Stored on the client browser	Transmitted (unencrypted) per request
Recommendation of 5GB limit	4kb limit

 

Details

 

HTML5 Storage uses a dictionary format - key-value pairs of data.

 

Session Storage: scope is limited to the lifetime of the browser tab. Useful for transactional or session scenario.

 

LocalStorage: spans multiple windows and persists beyond the current session. Useful for performance improvements/caching scenarios.

 

Methods

 

Functionality	Method Details
Save a value	sessionStorage.setItem('myKey','myValue'); OR sessionStorage.myKey = 'myValue';
Fetch a value	sessionStorage.getItem('myKey'); OR sessionStorage.myKey;
Remove a value	sessionStorage.removeItem('myKey');
Clear all values	sessionStorage.clear();

 

Events

 

Storage event - This event tracks any changes to the storage area and allows a reaction to the changes.

 

Errors

 

The Quota Exceeded Exception is raised if the user's storage quota is exceeded. The user cannot be provided storage higher than allowed by the browser's limits.

 

Potential Risks

 

Security and privacy concerns: Access can only be limited to certain path within a domain. Hence, the data is vulnerable to be accessed by unauthorized systems.

 

Code Sample

 

We will now take a look at a basic sample which uses the local storage to store a To-do list. The user can add items to the list which are stored in a single key named "ToDoList" and if you run this code within IE8+ or Firefox3.6+ (or any supporting browser), you can see that the user's entries are persisted even after browser restarts.

 

Code - save as todolist.html

<BR/>This example creates a basic To-Do List to demonstrate the HTML5 storage feature.
<BR/>
<HR width="600" align="left"/>
Add To-Do Item
<input type="text" id="ToDoItem"/>
<input type="button" value="Add to List"
onclick="AddToList();">
    <HR width="600" align="left"/>
    <input type="button" value="Show To Do List" onclick="DisplayList();">
        <BR/>
        <span id="myList">To Do List</span>
    </p>
    <br/>
    <HR width="600" align="left"/>
Clear To Do List:
    <input type="button" value="Clear List" onclick="ClearList();">
        <script>
  function AddToList()
{
  var storage = window.localStorage;
  if (!storage.todoList) storage.todoList = "";
  storage.todoList = storage.todoList + ToDoItem.value + "
            <BR/>";
  document.getElementById('myList').innerHTML = storage.todoList;
}
function ClearList()
{
  var storage = window.localStorage;
  storage.removeItem("todoList");
  document.getElementById('myList').innerHTML = "";
}
function DisplayList()
{
  var storage = window.localStorage;
  if (!storage.todoList) storage.todoList = "";
  document.getElementById('myList').innerHTML = storage.todoList;
}
        </script>

Sample in Action: this is the view of the sample, running in Firefox.

 

 

Conclusion

 

In this article, we talked about the HTML5 Storage feature. I hope this encourages you to look into potential uses of this feature when local browser storage is required. 

 

Happy Coding!