HTML5 Tutorial
HTML5 Demo
HTML5 Tools
HTML5 Useful References
HTML5 Tag Reference
HTML5 Resources
Selected Reading
- HTML5 - Web RTC
- HTML5 - Web CORS
- HTML5 - Web Messaging
- HTML5 - IndexedDB
- HTML5 - Web Workers
- HTML5 - Drag & drop
- HTML5 - Microdata
- HTML5 - Geolocation
- HTML5 - Audio & Video
- HTML5 - Canvas
- HTML5 - WebSocket
- HTML5 - Server-Sent Events
- HTML5 - Web SQL Database
- HTML5 - Web Storage
- HTML5 - MathML
- HTML5 - SVG
- HTML5 - Web Forms 2.0
- HTML5 - Events
- HTML5 - Attributes
- HTML5 - Syntax
- HTML5 - Overview
- HTML5 - Home
HTML5 Demo
- HTML5 - Web slide Desk
- HTML5 - Web Worker
- HTML5 - Drag and Drop
- HTML5 - Geo-Location
- HTML5 - Video Players
- HTML5 - Audio Players
- HTML5 - Canvas
- HTML5 - Server Sent Events
- HTML5 - Web Storage
HTML5 Tools
- HTML5 - Color Code Builder
- HTML5 - Online Editor
- HTML5 - Validation
- HTML5 - Modernizr
- HTML5 - Validator.nu Validation
- HTML5 - QR Code
- HTML5 - Velocity Draw
- HTML5 - MathML
- HTML5 - SVG Generator
HTML5 Useful References
- HTML5 - Char Encodings
- HTML5 - Entities
- HTML5 - URL Encoding
- HTML5 - Fonts Reference
- HTML5 - Color Names
- HTML5 - Quick Guide
HTML5 Tag Reference
HTML5 Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
HTML5 - Web Storage
HTML5 - Web Storage
HTML5 introduces two mechanisms, similar to HTTP session cookies, for storing structured data on the cpent side and to overcome following drawbacks.
Cookies are included with every HTTP request, thereby slowing down your web apppcation by transmitting the same data.
Cookies are included with every HTTP request, thereby sending data unencrypted over the internet.
Cookies are pmited to about 4 KB of data. Not enough to store required data.
The two storages are session storage and local storage and they would be used to handle different situations.
The latest versions of pretty much every browser supports HTML5 Storage including Internet Explorer.
Session Storage
The Session Storage is designed for scenarios where the user is carrying out a single transaction, but could be carrying out multiple transactions in different windows at the same time.
Example
For example, if a user buying plane tickets in two different windows, using the same site. If the site used cookies to keep track of which ticket the user was buying, then as the user cpcked from page to page in both windows, the ticket currently being purchased would "leak" from one window to the other, potentially causing the user to buy two tickets for the same fpght without really noticing.
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.
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>
This will produce the following result −
Local Storage
The Local Storage is designed for storage that spans multiple windows, and lasts beyond the current session. In particular, Web apppcations may wish to store megabytes of user data, such as entire user-authored documents or a user s mailbox, on the cpent side for performance reasons.
Again, cookies do not handle this case well, because they are transmitted with every request.
Example
HTML5 introduces the localStorage attribute which would be used to access a page s local storage area without no time pmit and this local storage will be available whenever you would use that page.
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>
This will produce the following result −
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.
To clear a local storage setting you would need to call localStorage.remove( key ); where key is the key of the value you want to remove. If you want to clear all settings, you need to call localStorage.clear() method.
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>
This will produce following result −
Advertisements