Summary -
In this topic, we described about the below sections -
What is web storage?
The HTML5's web storage feature allows us to save a certain data on the client's computer, such as HTTP session cookies, but it is faster and much better than cookies.
However, web storage is not safer than cookies, for storing structured data on the server-side and for overcoming the following drawbacks.
- Each HTTP request contains cookies, which reduce our web application by sending similar data.
- Each HTTP request contains cookies, which transmits data unencrypted over the internet.
- Data collected in the web storage will not be delivered to the web server as it is different from cookies where information is delivered with each request to the webserver. In addition, cookies allow us to save at least 4KB, the web storage accepts us to save up to 5MB of data.
HTML Web Storage Objects
There are two types of web storage and used to handle various conditions -
- Local storage — This local storage uses the localStorage object to save information for whole website on a permanent basis. That implies the saved local information will be accessible by tomorrow, the next week, or the next year unless we delete it.
- Session storage — This session storage uses the sessionStorage object to save information on a temporary basis, for a tab or single browser window. The information vanishes when session come to an end, i.e. when the client ends that browser window or tab.
Test browser support for sessionStorage and localStorage before using web storage -
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
The Local storage object
As stated above, the localStorage object saves the information without expiry date. Every piece of information saves in a pair of key/value.
The key differentiates the name of the data (such as 'first_name') and the value is connected to that key (for example say 'John').
Example -
Below example describes the local storage object.
<!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) in this session.";
} else {
document.getElementById("result").innerHTML =
"Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<button onclick="clickCounter()" type="button">Click me!
</button>
<div id="result"></div>
<p>Click the button to look at the counter is increment.
Close the browser window or (tab), and try again,
and the counter gets increase from the previous value.
</p>
</body>
</html>
Output-
We can also delete a certain item from the storage if it occurs, by passing the key name to the removeItem() method, like localStorage.removeItem("country-name").
However, if we want to delete the entire storage, use the clear() method, like localStorage.clear(). The clear() method takes no contentions, and easily clears all key/value pairs from localStorage at once, so think carefully before we use it.
The session storage object
The sessionStorage object work in the similar manner as localStorage, except that it saves the information only for one session, i.e. the information continues until the user ends that window or tab.
Example -
The following example calculates the number of times a client has clicked a button, in the present session.
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if (typeof(Storage) !== "undefined") {
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.";
} else {
document.getElementById("result").innerHTML = "Sorry,
your browser does not support web storage...";
}
}
</script>
</head>
<body>
<button onclick="clickCounter()" type="button">Click me!
</button>
<div id="result"></div>
<p>Click the button to look at the counter is improved.
Close the browser window or (tab), and try again,
and the counter is reset.</p>
</body>
</html>
Output-
Delete Web Storage
Storing sensitive data on local machine could be risky and could depart a security hole.
The Session Storage Data would be removed by the browsers instantly after the session becomes expired.
To clear a local storage data, we need to call localStorage.remove('key'); where 'key' is the key of the value we need to eliminate. If we need to clear the whole data till the time, we need to call localStorage.clear() method.
Example -
Below example describes about clearing complete local storage data.
<html>
<head>
<script>
localStorage.clear()
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) in this session.";
} else {
document.getElementById("result").innerHTML =
"Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<button onclick="clickCounter()"
type="button">Click me!</button>
<div id="result"></div>
<p>Note: -
Clearing the localStorage. So the counter will starts from 1
every time when a window or tab opened. Oherwise, it would have start
from where the counter letf of in the previous run.</p>
</body>
</html>
Output-
Browser Support
The following browsers and corresponding versions in the table that completely supports the Web Storage.
| API | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |