- HTML Introduction
- HTML Attributes
- HTML Basic Tag
- HTML Color
- HTML Comments
- HTML Fonts
- HTML Blocks
- HTML Images
- HTML Layout
- HTML Links
- HTML Lists
- HTML Formatting Tags
- HTML Table
- HTML Meta Tag
- HTML Frames
- HTML Parse Tag
- HTML Forms
- HTML Script
- HTML Style-CSS
- HTML XHTML
HTML5 Web Storage
HTML5 provides two mechanism for client storage and overcome the drawbacks of HTTP cookie as illustrated below.
- Cookies are included in every HTTP request, thereby impacting your web application performance by transmitting the same data.
- Cookies sends unecrypted data over HTTP request.
- Cookies has a limitation of 4 KB data and thus restricting amount of data that can be stored.
There are two storages - session storage and local storage and can be used to handle different situations.
The latest versions of every browser including IE supports it.
The Session Storage is designed for scenarios where user would be carrying out transactions in multiple windows.
For example, if a user is buying plane tickets using two different windows, for the same site. If he is using cookies it would land him buying two tickets.
HTML5 introduces the sessionStorage attribute which can be used by sites to add data to session storage and it would remove it once window is closed and it won't be shared across multiple windows.
Below code will set a session variable and access that variable:
The Local Storage is used for storage that can be used across multiple windows and which persists across session. In particular, Web applications may wish to store megabytes of user data, such as entire user's mailbox or user-authored documents, on the client side to increase performance.
Again, cookies do not handle this case well, as they are transmitted with every request.
HTML5 introduces the localStorage attribute that can be used to access a page's local storage area with no time limit and this local storage will be available whenever that page is used.
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:
Delete Web Storage:
We shouldn't store sensitive data in local storage
Session Storage Data can be used as it would be deleted by the browsers immediately after the session gets terminated.
In order to clear a local storage setting you would need to use calllocalStorage.remove('key'); where 'key' is the key of the value you want to remove. In order to clear all settings, you need to calllocalStorage.clear() method.
Below is the code which would clear complete local storage: