Following are the drawbacks of HTTP session cookies, for storing structured data on the client side :-
1. Cookies are incorporated with each HTTP request, subsequently slowing down your web application by transmitting the same information.
2. Cookies are incorporated with each HTTP request, in this way sending information decoded over the web.
3. Cookies are restricted to around 4 KB of information . Insufficient to store required information.
To overcome these drawbacks mentioned above, HTML5 introduces two storage machanism, that would be used to handle different situations. These are :-
1. Session Storage
2. Local Storage
Session Storage :- The Session Storage is intended for situations where the client is doing a single transaction, however could complete various transactions in various windows in the meantime.
HTML5 presents the sessionStorage property which would be utilized by the locales to add information to the session stockpiling, and it will be available to any page from the same site opened in that window i.e session and when you close the window, session would be lost.
Example :
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if( sessionStorage.hits ){
sessionStorage.hits = Number(sessionStorage.hits) +1;
}
else{
sessionStorage.hits = 1;
}
document.write("Total Hits :" + sessionStorage.hits );
</script>
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html>
Local Storage :- The Local Storage is intended for capacity that traverses different windows, and keeps going past the present session. Specifically, Web applications may wish to store megabytes of client information, for example, whole client wrote archives or a client's mailbox, on the client side for execution reasons.
HTML5 presents the localStorage property which would be utilized to get to a page's local storage area withou no time limit and this local storage will be accessible at whatever point you would utilize that page.
Example :
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if( localStorage.hits ){
localStorage.hits = Number(localStorage.hits) +1;
}
else{
localStorage.hits = 1;
}
document.write("Total Hits :" + localStorage.hits );
</script>
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html>
0 Comment(s)