Learn the top ten threats that are present in modern web-application development and how to protect your business from them.
HTML 5 Web Storage
Published on
9,682 Points
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!!!
-
3
- +1
6 Comments
Active 1 day ago
It might be helpful if you mention how much data can be stored in web storage, and also that it is shared per domain, not per page.
Hi, is it also worth mentioning that If you are developing web apps that utilise localStorage on mobile Safari that Apple have made a change that make it non- persistent from iOS5.1 onward.. Doh!
http://www.moneytoolkit.com/2012/04/apple-ios-html5-localstorage-is-broken/
http://www.moneytoolkit.com/2012/04/apple-ios-html5-localstorage-is-broken/
Featured Post
Learn about longtime user Rowby Goren and his great contributions to the site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a Hollywood writer to a website entrepreneur.
Suggested Articles
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.
