HTML 5 brings lots of powerful features
with it and for those who want alternative to cookies it has ‘Web Storage’ in its
magic box.
What is web storage?
Web storage is more secure alternative to
cookie to store data on client. We can store objects in the form of key value
pairs. Its access is fast and secure.
What are the types?
There are two types of available storage.
One is ‘Local Storage’ and other is ‘Session Storage’.
1. Local Storage:
Object stored in this storage does not have any expiry you can store any JavaScript object here. Even if you close the browser, objects in local storage are persisted.
2. Session Storage:
As the name suggests this storage is session specific. Object stored in this storage is persisted only for a browser session. If you close tab or browser window objects in this storage get
automatically cleared.
My Findings
One interesting fact I found during
my analysis of these storages that object stored in local storage gets shared
across tabs. It means when I open my website in two different tabs of the same
browser then object stored in local storage gets shared by both the instances.
But if I use session storage then objects are maintained specific to that
browser session considering different tabs. So if you want to share the data
irrespective of the multiple tabs then use local storage. But if you don’t want
the mix up of objects across instances then use session storage.
Functions
There are number of functions provided to
set, get and remove item from local/session storage. If you want to clear all
the objects in storage then ‘clear’ function is available. I don’t want to go
into much details of each function instead I would like to give more power to
you with some utility functions created by me.
Important
To use any HTML 5 feature it is important
to check browser compatibility as not all the browsers support its features. My
preference for checking the compatibility is Modermizr
library.
And here are utility functions for you.
Free of cost J
/*HTML5
Local Storage*/
/*------------------------------------------------------------------------------------*/
/*Sets
or adds item in HTML5 local storage*/
function setLocalItem(key, value) {
if (Modernizr.localstorage) {
localStorage.setItem(key, value);
}
}
/*Gets
item in HTML5 local storage*/
function getLocalItem(key) {
if (Modernizr.localstorage) {
return localStorage.getItem(key);
}
}
/*Removes
item in HTML5 local storage*/
function removeLocalItem(key) {
if (Modernizr.localstorage) {
localStorage.removeItem(key);
}
}
/*Clears
all items in HTML5 local storage*/
function clearLocalStorage() {
if (Modernizr.localstorage) {
localStorage.clear();
}
}
/*------------------------------------------------------------------------------------*/
/*HTML5
Session Storage */
/*------------------------------------------------------------------------------------*/
/*Sets
or adds item in HTML5 session storage*/
function setSessionItem(key, value) {
if (Modernizr.sessionstorage) {
sessionStorage.setItem(key, value);
}
}
/*Gets
item in HTML5 session storage*/
function getSessionItem(key) {
if (Modernizr.sessionstorage) {
return sessionStorage.getItem(key);
}
}
/*Removes
item in HTML5 session storage*/
function removeSessionItem(key) {
if (Modernizr.sessionstorage) {
sessionStorage.removeItem(key);
}
}
/*Clears
all items in HTML5 session storage*/
function clearSessionStorage() {
if (Modernizr.sessionstorage) {
sessionStorage.clear();
}
}
Hope this will help you as it made my life simple. Keep watching this space for more about HTML 5……
No comments:
Post a Comment