Saving the number of clicks the user have done in a Button, Storing it in the LocalStorage

Question

I'm Making a Two Button in HTML,CSS and Javascript. The first button is called "Call Button" and second button is "Skip Button".

The process/scenario is:

The Skip Button is Disabled,
It will only be Enabled when 'Call Button' was Clicked 3 times.
If 'Call Button' was Clicked Three Times by the User, The Skip BUtton will be enable.

I have already made the function for the said process and scenario.

The problem is, Everytime I clicked the "Call Button" the Page refresh and the counter for the button is always refreshing turning it into zero(0) value every time I click "Call Button".

Now is it possible to store the 'Counter' in a LocalStorage?

How Can I implement it in my Code? Its my First time using this kind of function.

I highly appreciate it.

`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
    
        // Function for counting the number of times the user clicked the call button
        let counter = 0;

        function enableButton() {
       
            checker += 1;
            if(counter === 3){
                document.getElementById("button2").disabled = false;
            }
        }

    </script>

</head>
<body>
    <button type="button" id="button1" onclick="enableButton()">Call Button</button>
    <button type="button" id="button2" disabled>Skip Button</button>
</body>
</html>`

The Above Code is a Example of my work. But on my original project, it has an refresh/reload function on button.

Answer 1

There might be other ways of doing it, but this is an example of how to store the counter in localStorage:

let counter = localStorage.getItem("clickCounter");
if (counter === null) {
    counter = 0;
} else {
    counter = parseInt(counter)
}

function enableButton() {
    counter += 1;

    localStorage.setItem("clickCounter", counter.toString());      
    if(counter >= 3){
        document.getElementById("button2").disabled = false;
    }
}

You have to parse the item from the localStorage, since you can only store strings.

Saving the number of clicks the user have done in a Button, Storing it in the LocalStorage

Question

1 answers

solution1
0 2023-01-30 01:28:26

Saving the number of clicks the user have done in a Button, Storing it in the LocalStorage

Question

1 answers

solution1 0 2023-01-30 01:28:26

solution1
0 2023-01-30 01:28:26