HTML5 offers the Web Storage feature, allowing web applications to store data locally on the client side within the browser. This feature stores data in a key/value pair format within the browser, sometimes referred to as DOM storage.
Saving data using web storage is akin to cookies, yet it offers superior performance and speed compared to cookie 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
Two categories of web storage exist, each with distinct scope and duration:
- Local Storage: It employs the Windows.localStorage object to retain data accessible across all pages. The stored data remains intact even when the browser is closed and reopened, as it has no expiration set.
- Session Storage: This utilizes the Windows.sessionStorage object to hold data for a single session, meaning the data is lost when the browser tab or window is closed.
Note: For both storage type, web storage data will not be available for different browsers, and Storage size may vary from browser to browser.
Browser support for Web Storage
Prior to delving into web Storage, it is essential to verify if the browser in use supports this feature. You can verify this by running the code snippet below:
<!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>
The localStorage Object
The localStorage object is used to store data locally in the browser, without any expiration date. This means that the data will persist even if the browser is closed and reopened.
Every data item is saved in basic key-value pairs. These key/value pairs are consistently saved as String and can be retrieved using the methods localStorage.getItem and localStorage.setItem.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Web Storage API</title>
<style>
body{
color: green;
text-align: center;
font-size: 30px;
margin-top: 30px;
font-style: italic;
}
</style>
</head>
<body>
<script>
if(typeof(Storage)!=="undefined") {
localStorage.setItem("name","Harshita");
localStorage.setItem("Country", "India");
document.write("Hi"+" "+localStorage.name+" "+"from" +" "+ localStorage.Country);
}
else{
alert("Sorry! your browser is not supporting the browser")
}
</script>
</body>
</html>
Example Explanation:
- In the above example, we have used typeof(Storage)!=="undefined" to check browser support.
- localStorage.setItem("name","Harshita") is used to set the key and value data where "name" is key and "Harshita" is value.
- The localStorage.name is used to retrieve the values using key. You can also use another method: localStorage.getItem to retrieve the value.
Note: You can check the local storage items in the form of key/value pair by inspecting elements on the web page and then go to the Application option where you will find the local storage and Session storage and can check stored items in the list.
You can refer to the provided screenshot containing key/value pairs for details.
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: pink;
height: 50px;
}
</style>
</head>
<body>
<h2>Example of counter Using Local Storage</h2>
<button onclick="counter();">click me</button>
<div id="output">See the result here :</div>
<script type="text/javascript">
function counter() {
if(localStorage.hits){
localStorage.hits=Number(localStorage.hits)+1;
}
else{
localStorage.hits=1;
}
document.getElementById('output').innerHTML= "You have clicked counter button for"+ " "+ localStorage.hits +" "+"times";
}
</script>
<p>click the counter button to see the total counts. </p>
<p>If you will close the browser still it will not reset. </p>
</body>
</html>
Example Explanation:
The example above demonstrates a counter that increments each time the counter button is clicked.
We have used localStorage.hits to set a counter
Note: It will show the total number of count even if you close the browser.
The sessionStorage Object:
The sessionStorage object functions similarly to the localStorage object, with the key distinction being that it retains data solely for the duration of one browsing session. Upon closing the browser, any stored data is either lost or deleted.
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: pink;
height: 50px;
}
</style>
</head>
<body>
<h2>Example of counter Using Session Storage</h2>
<button onclick="counter();">click me</button>
<div id="output">See the result here:</div>
<script type="text/javascript">
function counter() {
if(sessionStorage.hits){
sessionStorage.hits=Number(sessionStorage.hits)+1;
}
else{
sessionStorage.hits=1;
}
document.getElementById('output').innerHTML= "You have clicked counter button for"+ " "+ sessionStorage.hits +" "+"times";
}
</script>
<p>Click the counter button to see the total counts. </p>
<p>Now, if you close the browser then it will reset to initial value. </p>
</body>
</html>
Example Explanation:
The above example is working same as local storage counter example, but the difference is we have used sessionStorage.hits for session storage.
The counter will reset to its initial value if the browser is closed, starting anew from the beginning.
Tips: You can make these examples more attractive and useful by using jQuery with JavaScript.
Remove Web Storage:
The session storage data is designed to be automatically removed when the browser is closed, while the data stored in local storage persists even after the browser is closed.
To remove data stored locally, you must execute two functions:
1.
- : By utilizing localStorage.removeItem('key'), you can eliminate the value associated with a specific key.
2.
- : To erase all stored settings comprising key-value pairs, you can invoke localStorage.clear.
Example
<!DOCTYPE html>
<html>
<head>
<title>Web Storage API</title>
<style>
body{
color: green;
text-align: center;
font-size: 30px;
margin-top: 30px;
font-style: italic;
}
</style>
</head>
<body>
<button onclick="remove();">Remove item</button>
<div id="output"></div>
<script>
if(typeof(Storage)!=="undefined") {
localStorage.setItem("name","Harshita");
localStorage.setItem("Country", "India");
document.getElementById('output').innerHTML= "Hii, my name is"+ " "+ localStorage.name +" "+"and i belongs to"+" "+localStorage.Country;
}
else{
alert("Sorry! your browser is not supporting the browser")
}
function remove() {
localStorage.removeItem("name");
document.getElementById('output').innerHTML= "Hii, my name is"+ " "+ localStorage.name +" "+"and i belongs to"+" "+localStorage.Country;
}
</script>
</body>
</html>
Example Explanation:
In the example provided, we demonstrated the utilization of localStorage.removeItem("name"); This function is designed to eliminate the stored value associated with the key "name".
You have the option to eliminate an identifier for a specific key, or you also have the alternative to clear all stored data by utilizing the localStorage.clear function.
Browser Support:
| API | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
| Web Storage | Yes | Yes | Yes | Yes | Yes |