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
|
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();
|
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!