HTML5 web storage,
a better local storage than cookies.
What is HTML5 Web Storage?
With
HTML5, web pages can store data locally within the user's browser.
Earlier,
this was done with cookies. However, Web Storage is more secure and faster. The
data is not included with every server request, but used ONLY when asked for.
It is also possible to store large amounts of data, without affecting the
website's performance.
The data
is stored in key/value pairs, and a web page can only access data stored by
itself.
There are several reasons
to use client-side storage.
·
First, you can make your app work when
the user is offline, possibly sync'ing data back once the network is connected
again.
·
Second, it's a performance booster;
you can show a large corpus of data as soon as the user clicks on to your site,
instead of waiting for it to download again.
·
Third, it's an easier programming
model, with no server infrastructure required. Of course, the data is more
vulnerable and the user can't access it from multiple clients, so you should
only use it for non-critical data, in particular cached versions of data that's
also "in the cloud".
Browser Support
Web
storage is supported in Internet Explorer 8+, Firefox, Opera, Chrome, and
Safari.
Note: Internet Explorer 7
and earlier versions, do not support web storage.
localStorage and sessionStorage
There
are two new objects for storing data on the client:
- localStorage - stores data with no expiration date
- sessionStorage - stores data for one session
Before
using web storage, check browser support for localStorage and sessionStorage:
if(typeof(Storage)!=="undefined")
{
// Yes! localStorage and sessionStorage support!
// Some code.....
}
else else
{
// Sorry! No web storage support..
}
The localStorage
Object
The
localStorage object stores the data with no expiration date. The data will not
be deleted when the browser is closed, and will be available the next day,
week, or year.
Example
localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;
Example explained:
- Create a localStorage key/value pair with
key="lastname" and value="Smith"
- Retrieve the value of the "lastname" key and
insert it into the element with id="result"
Tip: Key/value pairs are
always stored as strings. Remember to convert them to another format when
needed.
The
following example counts the number of times a user has clicked a button. In
this code the value string is converted to a number to be able to increase the
counter:
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked
the button " + localStorage.clickcount + " time(s).";
The sessionStorage
Object
The
sessionStorage object is equal to the localStorage object, except that it stores the data for only one
session. The data is deleted when the user closes the browser window.
The
following example counts the number of times a user has clicked a button, in
the current session:
Example
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked
the button " + sessionStorage.clickcount + " time(s) in this
session.";
Good Luck...!!!
