HTML Web Storage, also known as DOM storage, is used to store data locally within the browser on the client side by a web application in the form of a key/value pair. Cookies are similar to storing data with the help of web storage. Web storage is, however, better and faster than cookie storage.
Advantages of the HTML Web Storage:
- Up to 5MB per domain storage space can be used for web storage.
- It is faster than cookie storage because it does not send data to the server side.
- The locally stored data never expires, however, data stored by cookies expire after some time or session.
- Web Storage facilitates secured data storage.
Types of Web Storage:
Based on the different scopes and lifetimes, there are two types of web storage. Web storage data is available for several browsers for both web storage types. The size of the storage though can vary depending on the browser.
Local Storage:
The Windows.localStaorage object is used by the local storage to store data which is available for every page. It is used to store data with no expiration i.e., even if the browser is closed and reopened the data persists.
Session Storage:
The Windows.sessionStorage object is used by the Session storage to store data for one session. And if the window or browser tab is closed, the data stored will be lost.
Browser support for Web Storage:
To check whether a browser is supporting the web Storage or not execute the below code:
Example:
<!DOCTYPE html>
<html>
<body>
<div id="support"></div>
<script>
if(typeof(Storage)!=="undefined") {
document.getElementById("support").innerHTML = "The Web Storage is supported by the browser.";
}
else{
document.getElementById("support").innerHTML = "The Web Storage is not supported by the browser.";
}
</script>
</body>
</html>
Explanation:
In the above example, we are checking the browser support for the HTML Web storage.
The localStorage Object:
To store data locally within the browser in simple key-value pairs such as String, the localStorage object is used. The data so stored does not have any expiration date i.e., even if the browser is closed and reopened the data is not deleted. The localStorage.getItem() and localStorage.setItem() methods are used to access the stored data.
Example:
<!DOCTYPE html>
<html>
<body>
<div id="local"></div>
<script>
if (typeof(Storage) !== "undefined") {
localStorage.setItem("name", "Tom");
document.getElementById("local").innerHTML = localStorage.getItem("name");
} else {
document.getElementById("local").innerHTML = "Web Storage is not supported by the browser.";
}
</script>
</body>
</html>
Explanation:
In the above example, the browser support is checked using the typeof(Storage)!==”undefined”. To set the key and value data the localStorage.setItem(” “) method is used. To retrieve a value using a key, the localStorage.getItem method is used.
By inspecting elements on a web page, the local storage items can be checked in the form of a key/value pair. To check the stored items in a list, visit the Application option to find the local storage and session storage.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: wheat;
border: 2px solid brown;
padding: 5px;
height: 30px;
}
</style>
</head>
<body>
<h2>Click to count:</h2>
<button onclick="counter();">Counter</button><br><br>
<div id="output">Number of Clicks:</div>
<script type="text/javascript">
function counter() {
if(localStorage.hits){
localStorage.hits=Number(localStorage.hits)+1;
}
else{
localStorage.hits=1;
}
document.getElementById('output').innerHTML= "The Counter button is clicked for"+ " "+ localStorage.hits +" "+"times.";
}
</script>
</body>
</html>
Explanation:
In the above example, the counter is increased by clicking the counter button. To set a counter the localStorage.hits is used. The total number of the count will be displayed even if the browser is closed.
The sessionStorage Object:
The sessionStorage object is used to store data only for one session. The data stored will be lost if the browser is closed.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: wheat;
border: 2px solid brown;
padding: 5px;
height: 30px;
}
</style>
</head>
<body>
<h2>Click to count:</h2>
<button onclick="counter();">Counter</button><br><br>
<div id="output">Number of Clicks:</div>
<script type="text/javascript">
function counter() {
if(sessionStorage.hits){
sessionStorage.hits=Number(sessionStorage.hits)+1;
}
else{
sessionStorage.hits=1;
}
document.getElementById('output').innerHTML= "The Counter button is clicked for"+ " "+ sessionStorage.hits +" "+"times.";
}
</script>
</body>
</html>
Explanation:
In the above example the sessionStorage.hits method is used for session storage. When the browser is closed, the counter resets. It again starts from the initial value.
Remove Web Storage:
To delete the local storage data, two methods need to be called:
localStorage.removeItem(‘key’):
This method is used to delete the value on a particular key.
localStorage.clear():
This method is used to delete or clear all settings with a key/value pair.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: wheat;
border: 2px solid brown;
padding: 5px;
height: 30px;
}
</style>
</head>
<body>
<h2>Click to count:</h2>
<button onclick="counter();">Counter</button><br><br>
<div id="output">Number of Clicks:</div>
<script type="text/javascript">
function counter() {
if(sessionStorage.hits){
sessionStorage.hits=Number(sessionStorage.hits)+1;
}
else{
sessionStorage.hits=1;
}
document.getElementById('output').innerHTML= "The Counter button is clicked for"+ " "+ sessionStorage.hits +" "+"times.";
}
</script>
</body>
</html>
Explanation:
In the above example, the localStorage.removeItem(“name”) method to delete the value for the key “name”.
Supporting Browsers:
Chrome, IE, Firefox, Opera, and Safari.