Storage of HTML5

 

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 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> 

--------------------------------------------------------------------------------------------------------------------