”;
HTML Web Storage is a mechanism that helps web applications to stores data locally in users browsers.
Types of Web Storage
HTML introduces two mechanisms, similar to HTTP session cookies, for storing structured data on the client side, without sending it to the server.
- Session Storage
- Local Storage
To use session storage or local storage in web application, we can access them through the window.sessionStorage and window.localStorage properties respectively.
Examples of HTML Web Storage
Here are some example that shows different ways of web storage in HTML.
Session Storage
The Session Storage is temporary and it gets cleared when the page session ends, which happens when the browser tab or window is closed. The data stored in session storage is specific to each tab or window.
HTML5 introduces the sessionStorage attribute which would be used by the sites to add data to the session storage, and it will be accessible to any page from the same site opened in that window, i.e., session and as soon as you close the window, the session would be lost.
Example
Following is the code which would set a session variable and access that variable.
<!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 designed for storage that spans multiple windows, and lasts beyond the current session. It does not expire and remains in the browser until it is manually deleted by the user or by the web application. In particular, web applications may wish to store megabytes of user data, such as entire user-authored documents or a user”s mailbox, on the client side for performance reasons.
Again, cookies do not handle this case well, because they are transmitted with every request.
HTML5 introduces the localStorage attribute which would be used to access a page”s local storage area without no time limit and this local storage will be available whenever you would use that page.
Example
Following is the code which would set a local storage variable and access that variable every time this page is accessed, even next time, when you open the window;
<!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>
Delete Web Storage
Storing sensitive data on local machine could be dangerous and could leave a security hole. The Session Storage Data would be deleted by the browsers immediately after the session gets terminated.
However, to clear a local storage setting, we need to call localStorage.remove(”key”); where ”key” is the key of the value we want to remove. If we want to clear all settings, the localStorage.clear() method can be called.
Example
Following is the code which would clear complete local storage;
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
localStorage.clear();
// Reset number of hits.
if( localStorage.hits ){
localStorage.hits = Number(localStorage.hits) +1;
} else {
localStorage.hits = 1;
}
document.write("Total Hits :" + localStorage.hits );
</script>
<p>
Refreshing the page would not to increase
hit counter.
</p>
<p>
Close the window and open it again and check
the result.
</p>
</body>
</html>
Reson to birng Web Storage over Cookies
The web storage is introduced to overcome the following drawbacks of cookies.
- Cookies are included with every HTTP request, thereby slowing down your web application by transmitting the same data.
- Cookies are included with every HTTP request, thereby sending data unencrypted over the internet.
- Cookies are limited to about 4 KB of data. Not enough to store required data.
”;