HTML Web Storage API
The HTML Web Storage API lets web applications store data locally in the user's browser, and it is better than cookies.
What is HTML Web Storage?
With web storage, applications can store data locally in the browser. Before HTML5, application data had to go in cookies, which were sent with every server request. Web storage is more secure and can hold large amounts of data locally without slowing the site. The storage limit is far larger than cookies (at least 5MB), and the data is never sent to the server. Storage is per origin (per domain and protocol), so all pages from one origin share the same data.
Web Storage API Objects
Web storage provides two objects: window.localStorage stores data with no expiration date (it is not lost when the tab is closed), and window.sessionStorage stores data for one session (it is lost when the tab is closed).
Browser Support
Both localStorage and sessionStorage are supported in all modern browsers (from Chrome 4, Edge 8, Firefox 3.5, Safari 4, and Opera 11.5).
Test Web Storage API Support
Before using web storage, you can quickly check that the browser supports it by testing typeof(Storage).
Example
Checking for web storage support.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Support</title>
</head>
<body>
<p id="result"></p>
<script>
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
x.innerHTML = "Your browser supports Web storage!";
} else {
x.innerHTML = "Sorry, no Web storage support!";
}
</script>
</body>
</html>
The localStorage Object
The localStorage object stores data with no expiration date, so it survives closing the browser and is available the next day, week, or year. Use localStorage.setItem() to create name/value pairs and localStorage.getItem() to read them. To remove an item, use localStorage.removeItem("name").
Note: Name/value pairs are always stored as strings, so convert them to another format when needed.
Example
Storing and retrieving values with localStorage.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Localstorage Basic</title>
</head>
<body>
<p id="result"></p>
<script>
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "Smith");
localStorage.setItem("bgcolor", "yellow");
// Retrieve
x.innerHTML = localStorage.getItem("lastname");
x.style.backgroundColor = localStorage.getItem("bgcolor");
} else {
x.innerHTML = "Sorry, no Web storage support!";
}
</script>
</body>
</html>
Counting Clicks with localStorage
This example counts how many times a user has clicked a button. The stored string is converted to a number so the counter can be increased, and because it uses localStorage the count persists across sessions.
Example
A click counter that persists across sessions.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Localstorage Counter</title>
</head>
<body>
<button onclick="clickCounter()">Click me!</button>
<p id="result"></p>
<script>
function clickCounter() {
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
x.innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s)!";
} else {
x.innerHTML = "Sorry, no Web storage support!";
}
}
</script>
</body>
</html>
The sessionStorage Object
The sessionStorage object works just like localStorage, except it stores the data for only one session. The data is deleted when the user closes that browser tab.
Counting Clicks with sessionStorage
This example counts how many times a user has clicked a button within the current session, using sessionStorage.
Example
A click counter that lasts only for the session.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sessionstorage Counter</title>
</head>
<body>
<button onclick="clickCounter()">Click me!</button>
<p id="result"></p>
<script>
function clickCounter() {
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
x.innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session!";
} else {
x.innerHTML = "Sorry, no Web storage support!";
}
}
</script>
</body>
</html>