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:
- 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.
// 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();
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.
Similarly ,use the session storage for temporary...
// 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();
sessionStorage.setItem(' key ', ' value ');
// Retrieve value from session storage
alert(sessionStorage.getItem(' key '));
// Remove item from array
sessionStorage.removeItem(' key ');
// clear array
sessionStorage.clear();
For checking browser supporting HTML 5 local storage use following code:
\
window['localStorage'] !== null ? 'Your browser supports local storage!' : 'Unfortunately your browser does not support local storage!';
window['localStorage'] !== null ? 'Your browser supports local storage!' : 'Unfortunately your browser does not support local storage!';
Download View Demo
No comments:
Post a Comment