How to change a button text on click using localStorage in Javascript ?

Last Updated : 04 Apr, 2022

In this article, we will learn how to change a button text using Javascript localStorage when we click on the button achieved by adding HTML onclick event listener.

Approach: HTML DOM Window localStorage allows us to store key-value pairs in our browser using an object. The name of the key should be unique and key-value pairs always be stored in string format. The main difference between localStorage and sessionStorage is that the data stored in localStorage does not clear unless localStorage.clear() is given. The data stored in sessionStorage gets cleared when the page session is exited unless sessionStorage.clear() is given.

Using localStorage object, we will invoke getItem('Key','Value') method to set data using localStorage.setItem('Key','Value') and change the button text using localStorage.getItem('Key').

Syntax:

Storageobj = window.localStorage;

Return Value: It returns a storage object.

Example: Below is the implementation of the above approach.

HTML: Below is the HTML code written:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Changing Button text on hovering using localStorage</title>
    <meta charset="UTF-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;500&display=swap');
        * {
            margin: 0px;
            padding: 0px;
            font-family: 'Zilla Slab', serif;
        }
        section {
            position: absolute;
            width: 100%;
            height: 100%;
            right: 0px;
            bottom: 0px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        #containers {
            text-align: center;
            border: 2px solid green;
            height: 52vh;
            width: 29vw;
            display: flex;
            justify-content: center;
            flex-direction: column;
            background-color: cornsilk;
        }
        section p {
            font-weight: 400;
        }
        /* Designing Button */
        #btn {
            margin-top: 12px;
        }
        button {
            padding: 7px;
            border: 1px solid black;
            border-radius: 3px;
            cursor: pointer;
            font-weight: 500;
        }
        button:hover {
            transition: 1s;
            background-color: rgb(226, 226, 228);
        }
    </style>
</head>

<body>
    <section id="btn-container">
        <div id="containers">
            <p id="para-id">
               Click the Button to change the Button text
            </p>

            <div id="btn">
                <button id="btn-design">CLICK NOW</button>
            </div>
        </div>
    </section>
</body>
<script src="script.js"></script>
</html>

JavaScript: Below is the JavaScript code written:

JavaScript

let btnDsn = document.querySelector("#btn-design");
localStorage.setItem('Name','CLICKED');
let name = localStorage.getItem('Name');

(function (){
    btnDsn.onclick = function() {
        btnDsn.textContent = name;
    };
})();

Output:

To clear all the data from localStorage, we can use localStorge.clear() which helps to clear all the data which we have inserted using the setItem() method. As a result, on hovering over the button, the text will remain unchanged as the localStorage is already cleared.

JavaScript code: Below is the implementation of the above approach. You can change the above script code with the following snippet.