Horje
HTML Web Storage API

HTML web storage; better than cookies.

The two mechanisms within Web Storage are as follows:

  • sessionStorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores).
    • Stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.
    • Data is never transferred to the server.
    • Storage limit is larger than a cookie (at most 5MB).
  • localStorage does the same thing, but persists even when the browser is closed and reopened.
    • Stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser cache / Locally Stored Data.
    • Storage limit is the maximum amongst the two.

 

The Web Storage is one of the great features of HTML5. With the Web Storage feature, web applications can locally store data within the browser on the client side. It stores data in the form of key/value pair on the browser. Web Storage sometimes also known as DOM storage.

Storing data with the help of web storage is similar to cookies, but it is better and faster than cookies storage.

In compared to cookies Web Storage has Following Advantages:

  • Web Storage can use storage space upto 5MB per domain. (The browser software may prompt the user if the space limit is reached).
  • It will not send data to the server side, hence it is faster than cookies storage.
  • The data stored by local Storage never expires, but cookies data expires after some time or session.
  • Web Storage is more secure than cookies.

Types of Web Storage

There are two types of web storage with different scope and lifetime.

  • Local Storage: Local Storages uses Windows.localStaorage object which stores data and available for every page. But data persist even if the browser is closed and reopened (Stores data with no Expiration).
  • Session Storage: Session Storage uses Windows.sessionStorage object which stores data for one session and data will be lost if the window or browser tab will be closed.

 

 

Example of HTML Web Storage API

index.html
Example: HTML 
<!DOCTYPE html>
<html>
<body>
 <div id="result"></div>
 <script>
  if(typeof(Storage)!=="undefined") {
   document.getElementById("result").innerHTML = "Hey, Your browser supports the Web Storage.";
  }
  else{
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage";
  }
</script>
</body>
</html>

Output should be:

Example of HTML Web Storage API



Category:
 Web Tutorial
Sub Category:
 HTML Web Storage API
Uploaded by:
 Admin

Read Article
https://horje.com/learn/1434/reference

 

Horje