HTML Web Storage API: HTML web storage; better than cookies.
The HTML5’s web storage highlight allows you to store some data locally on the user’s computer, like cookies, but it is faster and much better than cookies.
In this tutorial, you will learn-
In this article, you will learn-
What is HTML Web Storage?
With web storage, web applications can store data locally inside the user’s browser.
Before to HTML5, application data must be stored in cookies, remembered for each server request. Web storage is safer, and a lot of data can be stored locally, without influencing site execution.
Unlike cookies, the storage limit (essentially 5MB) and data is never moved to the server.
Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access similar data.
HTML Web Storage Objects
HTML web storage provides two objects for storing data on the client:
• window.localStorage – stores data with no expiration date
• window.sessionStorage – stores data for one session (data is lost when the browser tab is closed)
Before to using web storage, check browser support for localStorage and sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
The localStorage Object
The localStorage object stores the data with no expiration date. The date won’t be deleted when the browser is closed, and will be accessible the next day, week, or year.
Example
// Store
localStorage.setItem("lastname", "Khan");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Example explained:
• Create a localStorage name/value pair with name=”lastname” and value=”Khan”
• Retrieve the value of “lastname” and insert it into the element with id=”result”
The example above could likewise be written like this:
// Store
localStorage.lastname = "Khan";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
The syntax for eliminating the “lastname” localStorage item is as follows:
localStorage.removeItem("lastname");
Note: Name/value pairs are constantly stored as strings. Make sure to change them over to another format when required!
The accompanying example counts the number of times a user has clicked a catch. In this code the value string is changed over to a number to have the option to increase the counter:
Example
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>
Click the button to see the counter increase.
Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).
The sessionStorage Object
The sessionStorage object is equivalent to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the particular browser tab.
The accompanying example counts the number of times a user has clicked a catch, in the current session:
Example
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
