HTML5 Web Storage

HTML5 web storage provides a better alternative to cookies. Before we start discussing how to use HTML5 web storage API in our HTML documents, we’ll give our readers a quick overview of it.

What is HTML5 Web Storage API?

By harnessing the power of web storage API, web applications can store data in web browsers.

Before the advent of HTML5, the only medium for storing application data in cookies; that’s why they are included in every server request.

The web server provides a more robust and secure medium for data storage and can store tremendous data without affecting the website’s performance.

As we all know, the capacity of data storage of is cookies is insanely small. In stark contrast, HTML web storage API can store at least 5MB of data, and information stored in it is never transferred to the server.

Browsers Support for HTML5 Web Storage

Below is the list of browsers that fully support HTML5 web storage API.

Google chrome 4.0
Microsoft Edge 8.0
Firefox 3.5
Safari 4.0
Opera 11.5

Objects of HTML5 Web Storage API

HTML5 web storage comes with two objects for storing all data on the client-side:

window.localStorage – stores data on the browser permanently and has no expiration date.
window.sessionStorage – stores data temporarily, and the stored data will be lost completely when the browser tab is closed.

The localStorage Object

The localStorage object stores data permanently and has no expiration time. The data will remain saved when the browser is closed and will be available for use in the foreseeable future

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Web Storage API</title>
</head>
<body>
    <div id="sample"></div>
    <script>
        // check browser support before writing code
        if (typeof (Storage) !== 'undefined') {
            //store
            localStorage.setItem("firstname", "Vinay Singh")
            //Retrieve
            document.getElementById("sample").innerHTML = localStorage.getItem("firstname");
        } else {
            document.getElementById("sample").innerHTML =
                "Sorry, your browser does not support HTML5 web storage API...";
        }
    </script>
</body>
</html>

The output of this code will be

HTML5 Web Storage

Explanation of code

Create a localStorage name/value pair with name=” firstname” and value =” Vinay Singh”
Retrieve the value we assigned to the firstname and embed it into the div element with id=” sample.”

The code we have written above can also be written as:

// for storing an application data

localStorage.firstname = “Vinay Singh”

// Retrieving the stored data

document.getElementById(“sample”).innerHTML = localStorage.firstname;

We can use the following syntax for removing the first name item stored in the web storage API:

localStorage.removeItem(“firstname”);

It is worth mentioning here that name/value pairs are always stored in string format. Do not forget to convert them in another format when necessary.

The code snipped listed below will count how many times a user has clicked a button. In this example, we convert the value string into a number to increase the ‘clickcounter’ variable.

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Web Storage API</title>
</head>
<body>
    <script>
        function clickCount() {
            if (typeof (Storage) !== "undefined") {
                if (localStorage.clickcounter) {
                    localStorage.clickcounter = Number(localStorage.clickcounter) + 1;
                } else {
                    localStorage.clickcounter = 1;
                }
                document.getElementById("sample").innerHTML = "You have clicked the button " +
                    localStorage.clickcounter + " times.";
            } else {
                document.getElementById("sample").innerHTML = "Sorry, your browser does not support HTML5 web storage API";
            }
        }
    </script>
    <p> <button type="button" onclick="clickCount()"> Click here</button> </p>
    <div id="sample"></div>
    <p>Click the button to increase the counter variable</p>
    <p>Close the browser and see the results. clickcounter will not reset and keep increaseing </p>
</body>
</html>

Here is how the web storage API will display in the browser.

HTML5 Web Storage

The sessionStorage Object

The sessionStorage object is the same as localStorage, but the only difference is that data will remove when the browser closes. That means it can only be used for storing data temporarily.

The code example listed below will check how many times a user has clicked a button in the current session.

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Web Storage API</title>
</head>
<body>
    <script>
        function clickCount() {
            if (typeof (Storage) !== "undefined") {
                if (sessionStorage.clickcounter) {
                    sessionStorage.clickcounter = Number(sessionStorage.clickcounter) + 1;
                } else {
                    sessionStorage.clickcounter = 1;
                }
                document.getElementById("sample").innerHTML = "You have clicked the button " +
                    sessionStorage.clickcounter + " times.";
            } else {
                document.getElementById("sample").innerHTML = "Sorry, your browser does not support HTML5 web storage API";
            }
        }
    </script>
    <p> <button type="button" onclick="clickCount()"> Click here</button> </p>
    <div id="sample"></div>
    <p>Click the button to increase the clickcounter variable</p>
    <p>Close the browser and see the results. clickcounter will reset and stop increaseing </p>
</body>
</html>

The output of this code will be

HTML5 Web Storage

To learn more about the web storage API, read more.

Next Lesson » « Previous Lesson