HTML Web Storage

What is HTML Web Storage?

The Web storage means web applications can store data locally within the user's browser.

HTML web storage; better than cookies.

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.

Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

Browser support for Web Storage

Example

<script>
if(typeof(Storage)!=="undefined") {  
  document.getElementById("demo").innerHTML = "Your browser supports the Web Storage.";  
}  
else{  
  document.getElementById("demo").innerHTML = "Sorry, your browser does not support Web Storage";  
}
</script>

Try this code ❯

typeof(Storage)!=="undefined" is used to check browser support.

Types of Web Storage

There are two types of web storage.

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.

Local Storage

Example

<script>
// Storing Value
localStorage.setItem("fullname", "John Doe");

// Getting Value
document.getElementById("demo").innerHTML = localStorage.getItem("fullname");
</script>

Try this code ❯

Session Storage

Example

<script>
function myFunction() {
if(sessionStorage.count){
 sessionStorage.count=Number(sessionStorage.count)+1;
}
else{
 sessionStorage.count=1;
}
 //result
 document.getElementById('output').innerHTML= "You have clicked button for "+ sessionStorage.count +" "+"times";
}
</script>

Try this code ❯

Remove Web Storage:

The session storage data will automatically be deleted, when you close the browser but the data saved by local storage will remain in the browser even if you close it.

To delete the local storage data, you need to call two methods:

1. localStorage.removeItem('key') If you want to delete the value on a particular key, then you can use the "key," and that value will be deleted.
2. localStorage.clear() If you want to delete or clear all settings with key/value pair, then you can call this method.

Example

<script>
//Setting Value
function set(){
localStorage.setItem("fullname", "John Doe");
}

//Removing Value
function remove(){
localStorage.removeItem("fullname");
}

document.getElementById("demo").innerHTML = localStorage.getItem("fullname");
</script>

Try this code ❯