HTML5 web storage
HTML5 has introduced feature, HTML5 web storage. HTML5 web storage allows us to store data on web browser/client machine. Now we can create apps that can run offline too, itsnt it amazing ??
HTML5 web storage is also know as Local storage which is same like cookies but there are few improvements in HTML5 web storage, removing drawbacks of tradition cookies. cookies has some limitation and drawbacks like
- Short storage space (4kb only)
- cookie data gets transmitted over HTTP header, It sends data over HTTP in unencrypted form, so if your application is not served over SSL it would be a big security hole.
- Bandwidth used to transmit the cookies is wasted
There are basically two types of HTML5 web storage introduced. We can differentiate them on the basis of scope and lifetime.
- Local Storage
- Session Storage
Local Storage
Local storage can be available to all scripts from the domain that originally stored the data. Local storage even persist after you close the tab. You need to manually remove it using javascript or need to clear browsers cache.
Local storage usage
|
1 2 3 4 5 6 7 8 9 10 11 |
// Store value in local storage localStorage.setItem('key', 'value'); // Retrieve value from local storage alert(localStorage.getItem('key')); // Remove item from array localStorage.removeItem('key'); // clear array localStorage.clear(); |
Session Storage
Session storage is non persist, so if you close the browser session storage will be flushed and values will be no longer accessible. Data stored in session storage is accessible only from the domain that initially stored it. web browsers themselves clear session storage when we close it.
Sessionstorage usage
|
1 2 3 4 5 6 7 8 9 10 11 |
// Store value in session storage sessionStorage.setItem('key', 'value'); // Retrieve value from session storage alert(sessionStorage.getItem('key')); // Remove item from array sessionStorage.removeItem('key'); // clear array sessionStorage.clear(); |
I recently added article about web storage and demonstrated how to use local storage and session storage. So i thought to go further and create a application based on html5 web storage so that me and you […]
how much data can be stored?
Almost 5MB per origin.
[…] had look at different features of css3 and html5 like creating css3 flowers using gradient effect, Introduction to HTML5 web storage, Ajax file upload with drag and drop and progress bar. In this tutorial we will look at the new […]
When you clear HTML5 storage, can you use software such as CCleaner, or do you have to clear the stored data only through the browser?
I think you have to clear it yourself, I am not sure if ccleaner can clean it or not.