保存用户在按钮中完成的点击次数，将其存储在 LocalStorage 中

Question

我在 HTML、CSS 和 Javascript 中制作了两个按钮。第一个按钮称为“呼叫按钮”，第二个按钮称为“跳过按钮”。

过程/场景是：

跳过按钮被禁用，
仅当“呼叫按钮”被单击 3 次时才会启用。
如果“呼叫按钮”被用户单击三次，则将启用“跳过”按钮。

我已经为上述流程和场景制作了 function。

问题是，每次我单击“呼叫按钮”时，页面都会刷新，并且每次单击“呼叫按钮”时按钮的计数器都会刷新，将其变为零 (0) 值。

现在可以将“计数器”存储在 LocalStorage 中吗？

我如何在我的代码中实现它？ 这是我第一次使用这种 function。

我非常感激。

`<!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>`

上面的代码是我工作的一个例子。 但是在我原来的项目中，它有一个刷新/重新加载 function 按钮。

Answer 1

可能还有其他方法，但这是一个如何将计数器存储在 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;
    }
}

您必须从 localStorage 中解析项目，因为您只能存储字符串。

保存用户在按钮中完成的点击次数，将其存储在 LocalStorage 中

问题描述

1 个解决方案

解决方案1
0 2023-01-30 01:28:26

保存用户在按钮中完成的点击次数，将其存储在 LocalStorage 中

问题描述

1 个解决方案

解决方案1 0 2023-01-30 01:28:26

解决方案1
0 2023-01-30 01:28:26