Introduction to HTML5 Storage


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


Method Details
Save a value
sessionStorage.myKey = 'myValue';
Fetch a value
Remove a value
Clear all values
Storage event - This event tracks any changes to the storage area and allows a reaction to the changes.
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
  1. <BR/>This example creates a basic To-Do List to demonstrate the HTML5 storage feature.  
  2. <BR/>  
  3. <HR width="600" align="left"/>  
  4. Add To-Do Item  
  5. <input type="text" id="ToDoItem"/>  
  6. <input type="button" value="Add to List"  
  7. onclick="AddToList();">  
  8.     <HR width="600" align="left"/>  
  9.     <input type="button" value="Show To Do List" onclick="DisplayList();">  
  10.         <BR/>  
  11.         <span id="myList">To Do List</span>  
  12.     </p>  
  13.     <br/>  
  14.     <HR width="600" align="left"/>  
  15. Clear To Do List:  
  16.     <input type="button" value="Clear List" onclick="ClearList();">  
  17.         <script>  
  18.   function AddToList()  
  19. {  
  20.   var storage = window.localStorage;  
  21.   if (!storage.todoList) storage.todoList = "";  
  22.   storage.todoList = storage.todoList + ToDoItem.value + "  
  23.             <BR/>";  
  24.   document.getElementById('myList').innerHTML = storage.todoList;  
  25. }  
  26. function ClearList()  
  27. {  
  28.   var storage = window.localStorage;  
  29.   storage.removeItem("todoList");  
  30.   document.getElementById('myList').innerHTML = "";   
  31. }  
  32. function DisplayList()  
  33. {  
  34.   var storage = window.localStorage;  
  35.   if (!storage.todoList) storage.todoList = "";  
  36.   document.getElementById('myList').innerHTML = storage.todoList;  
  37. }  
  38.         </script>  
Sample in Action: this is the view of the sample, running in Firefox.


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!