Browse All Articles > HTML 5 Web Storage
HTML 5 is the latest buzz in developing RIA (Rich Internet Application). One the best features in HTML 5 is Web Storage!
It's really amazing and powerful. It totally replaces the traditional Cookies!
HTML 5 Web Storage is of two types -
1. Local Storage
2. Session Storage
I discussed Local Storage on my blog (see below) but will discuss Session Storage in detail here, so that you can kick start using it at once, when you are done reading this article.
Similar to Session in Server Side Programming( ASP.NET, PHP ), it just holds the data in Client Side.
Unlike Cookies, it won't travel with each request to the server. It will be available in the browser and it can be retrieved when it requires.
Storing and retrieving data in the Session Storage is pretty simple!
Store data in Session Storage!
Data is stored as Key/Value pair! So in the above code -
myName is Key, Session Storage is Value.
It's always a good practice, to check whether the feature is supported by the browsers or not, since the feature may not be support in the older browsers! In that case you have a chance to create a fall back method.
Retrieve the data from Session Storage!
A simple app demonstrating the Session Storage!
NOTE: Session and Local Storage is compatible with all HTML 5 browsers. i.e., IE 8+, Firefox 4+, Google Chrome 10+, Opera 10+ etc.,
IE8 is not fully HTML5 compatible, but it supports Web storage!
Only data of type Strings can be stored. It also allows to store JSON data, by calling JSON.Stringify() method to convert the JSON to string!
Maximum storage size per domain in 5 MB. This is consistent across all browsers!
I hope you can start using HTML5 Web Storage instead of Cookies today!
Happy Web Programming!!!
It's really amazing and powerful. It totally replaces the traditional Cookies!
HTML 5 Web Storage is of two types -
1. Local Storage
2. Session Storage
I discussed Local Storage on my blog (see below) but will discuss Session Storage in detail here, so that you can kick start using it at once, when you are done reading this article.
Local Storage
I already discussed about Local Storage on my blog - Local Storage - Avoid CookiesSession Storage
In contrast to Local Storage, the lifetime of this storage is per session. When the user closes the browser, the stored data expires. It just stores data for particular session.Similar to Session in Server Side Programming( ASP.NET, PHP ), it just holds the data in Client Side.
Unlike Cookies, it won't travel with each request to the server. It will be available in the browser and it can be retrieved when it requires.
Storing and retrieving data in the Session Storage is pretty simple!
Store data in Session Storage!
<script type="text/javascript">
//Check whether the browser supports Session Storage, if yes, then store the data.
if (window.sessionStorage) {
sessionStorage.myName = "Session Storage";
}
</script>Data is stored as Key/Value pair! So in the above code -
myName is Key, Session Storage is Value.
It's always a good practice, to check whether the feature is supported by the browsers or not, since the feature may not be support in the older browsers! In that case you have a chance to create a fall back method.
Retrieve the data from Session Storage!
<script type="text/javascript">
if(window.sessionStorage && sessionStorage.myName != null)
alert(sessionStorage.myName);
</script>A simple app demonstrating the Session Storage!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form id="form1" >
<div>
<input type="button" value="Get Value" onclick="getSessionStorageValue();" />
</div>
</form>
<script type="text/javascript">
if (window.sessionStorage) {
sessionStorage.myName = "Session Storage";
}
function getSessionStorageValue() {
if(window.sessionStorage && sessionStorage.myName != null)
alert(sessionStorage.myName);
}
</script>
</body>
</html>NOTE: Session and Local Storage is compatible with all HTML 5 browsers. i.e., IE 8+, Firefox 4+, Google Chrome 10+, Opera 10+ etc.,
IE8 is not fully HTML5 compatible, but it supports Web storage!
Only data of type Strings can be stored. It also allows to store JSON data, by calling JSON.Stringify() method to convert the JSON to string!
Maximum storage size per domain in 5 MB. This is consistent across all browsers!
I hope you can start using HTML5 Web Storage instead of Cookies today!
Happy Web Programming!!!
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (6)
Author
Commented:Thanks for the feedback! I'll try to update the article pretty soon!
Commented:
http://www.moneytoolkit.com/2012/04/apple-ios-html5-localstorage-is-broken/
Author
Commented:Thanks for the update!
Author
Commented:I'm done updating the information suggested by the users!
Commented:
View More