HTML5 Web Storage - HTML 5

What is the use of web storage in HTML5?

Similar to HTTP session cookies, HTML5 introduces two mechanisms one for storing structured data on the client side and the other to overcome below disadvantages.

  • Cookies will be included with every HTTP request to slow down the web application by transmitting same data.
  • Cookies will be included with every HTTP request to send unencrypted data over the internet.
  • Cookies are limited to 4 KB of data which is not enough to store required data.

Two storage's session storage and local storage will be used to handle various situations. All the browsers with latest versions including Internet Explorer support HTML5 Storage.

Session Storage

Session Storage is designed for scenarios where a single transaction is carried out but it might be carrying out multiple transactions in different windows simultaneously.HTML5 introduces SessionStorage attribute and sites use it for adding data to the session storage. Any page can access SessionStorage from the same site opened in that window which means session would be lost as soon as the window is closed.Below code sets a session variable to access that variable

Output

Output

Local Storage

Local Storage is designed for storing spans multiple windows, and stays beyond the current session. Web applications can store megabytes of user data on the client side such as entire user-authored documents or a user's mailbox for performance reasons.Cookies cannot handle this as they are transmitted with every request.

Example

HTML5 introduced a localStorage attribute which is used to access a page's local storage area without any time limit and this local storage is available whenever user uses that page.

Below code sets a local storage variable to access that variable every time when this page is accessed

Output

Output

Delete Web Storage

Storing sensitive data on local machine can be dangerous and can lead to a security hole. Session Storage Data is deleted by the browsers immediately when the session is terminated.localStorage.remove('key')method can be called to clear a local storage setting. In this method, 'key' is the key of the value which has to be removed. To clear all settings, user has to calllocalStorage.clear()method.Below code can be used to clear complete local storage

Output

Output

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 5 Topics