Question

现在我有一个单击按钮（或一个名为“ .like”的按钮，它是名为.download png的图像），仅在单击时显示单击按钮结果数计数器。我试图使按钮始终显示结果，不仅是单击时，而且单击时仍要向上计数一次。到目前为止，这是标题中的代码：

<script>
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.firstButtonCount) {
            localStorage.firstButtonCount = Number(localStorage.firstButtonCount)+1;               
        } else {
            localStorage.firstButtonCount = 1; 
        }
        document.getElementById("result").innerHTML = localStorage.firstButtonCount; 
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
    }

}
</script>

然后是正文代码：

<p>
    <button type="button" onclick="clickCounter()">
        <div class="number" id="result"></div>
        <img src="download.png" width="50px" height="auto class="clickCounter()" type="button alt="Like"/>
    </button>
</p>

我不确定自己在做什么错，但是如果有人可以告诉我如何始终显示结果，那将是很棒的事情！

Answer 1

请注意：

要在localStorage中获取值，请使用方法getItem。

要在localStorage中添加值，请使用setItem方法。

有关更多https://www.taniarascia.com/how-to-use-local-storage-with-javascript/，请参阅本文

使用以下代码替换您的代码：

<!DOCTYPE html>
            <html lang="pt-br">
            <meta charset="utf-8" />

            <head>
                <title>Vote</title>

            </head>

            <body>
                <p>
                    <button type="button" onclick="clickCounter()">
                        <div class="number" id="result"></div>
                        <img src="https://cdn4.iconfinder.com/data/icons/like-18/32/459-01-512.png" width="50px" height="auto" type="button" alt="Like" />
                    </button>
                </p>
                <script type="text/javascript">
                    var resultElement = document.getElementById('result');

                    function updateResult() {

                        resultElement.innerText = parseInt(localStorage.getItem('firstButtonCount')) || 0;;

                    }

                    function vote() {
                        // body...
                        newCount = parseInt(localStorage.getItem('firstButtonCount')) + 1 || 0 + 1;

                        localStorage.setItem('firstButtonCount', newCount);

                    }

                    function clickCounter() {
                        if (typeof(Storage) !== "undefined") {

                            /*
                            to get a value in localStorage ,  you use the method getItem
                            to add a value in localStorage , you use the method setItem
                            */

                            vote();
                            updateResult();

                        } else {
                            document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
                        }
                    }

                    updateResult();
                </script>
            </body>

            </html>

Answer 2

我为您制作了一个片段示例，由于违反安全性，我无法使用本地存储功能，但是您可以在本地开发框架上启用它并丢弃全局计数器。

var _globalCounter = 0;
document.getElementById("result").innerHTML = _globalCounter;

function clickCounter()
{
    _globalCounter++;
    document.getElementById("result").innerHTML = _globalCounter;

    // This don't work on snippet because security violation,
    // but it should work on you local development framework.

    /*
    if (typeof(Storage) === "undefined")
    {
        alert("Browser don't support local storage");
        return;
    }
    
    var count = Number(localStorage.getItem("firstButtonCount"));

    if (count && count > 0)
    {
        count++;
        localStorage.setItem("firstButtonCount", count);
    }
    else
    {
        localStorage.setItem("firstButtonCount", 1);
    }

    document.getElementById("result").innerHTML = localStorage.getItem("firstButtonCount");
    */
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

<button type="button" onclick="clickCounter()">    
    <i class="far fa-2x fa-thumbs-up"></i>
    <spam class="number" id="result"></spam>
</button>

试图使我的单击按钮始终显示结果，而不仅仅是单击时

2 个答案: