Question

我有一个名为category.html的页面。我试图在JavaScript localStorage中存储类别的值，以便我可以将它传递给下一个html页面。我试图将单元格内的clicked元素作为localStorage中类别变量的值传递，但在第一次单击时不会发生这种情况。它在第一次点击后有效。我究竟做错了什么？

＆＃13;

<html>

<!--
https://jsfiddle.net/vu9d9mzb/#&togetherjs=sgTRTjfJ0m
-->

<head>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script>
        function store() {
            var display = document.getElementById("result");
            $("a").click(function() {
                var nameOfCategory = $(this).attr("categoryName");
                nameOfCategory = String(nameOfCategory);
                if (typeof(Storage) !== "undefined") {
                    // Store
                    localStorage.setItem("category", nameOfCategory);
                    // Retrieve
                    var checkLocalStorage = localStorage.getItem("category");
                    display.innerHTML = "Value of checkLocalStorage variable: " + checkLocalStorage + "<br>";
                    //console.log("Value of checkLocalStorage variable: " + checkLocalStorage);
                } else {
                    displayMessage.innerHTML = "Sorry, your browser does not support Web Storage..." + "<br>";
                    //console.log("Sorry, your browser does not support Web Storage...");
                }
                display.innerHTML += "Value of nameOfCategory varaible: " + nameOfCategory + "<br>";
                //console.log("Value of nameOfCategory varaible: " + nameOfCategory);
            }); // end of a.click function
        }
    </script>
</head>

<body>

    <table>
        <tr>
            <th>Category</th>
        </tr>
        <tr>
            <td><a onclick=store() categoryName="Fruits">Fruits</a>
            </td>
        </tr>
        <tr>
            <td><a onclick=store() categoryName="Vegetables">Vegetables</a>
            </td>
        </tr>
        <tr>
            <td><a onclick=store() categoryName="Clothes">Clothes</a>
            </td>
        </tr>
    </table>

    <div id="result">
    </div>

</body>

</html>

＆＃13;

如果代码由于跨源问题而未在此处运行，那么这里是jsfiddle链接： - https://jsfiddle.net/vu9d9mzb/#&togetherjs=sgTRTjfJ0m

Answer 1

您只在注册商店后注册点击事件。将调用商店，将设置事件，然后单击事件将起作用，请尝试：

https://jsfiddle.net/ahp8tpzn/1

$(document).ready(function() {
    var display = document.getElementById("result");
    $("a").click(function() {
        var nameOfCategory = $(this).attr("categoryName");
        nameOfCategory = String(nameOfCategory);
        if (typeof(Storage) !== "undefined") {
            // Store
            localStorage.setItem("category", nameOfCategory);
            // Retrieve
            var checkLocalStorage = localStorage.getItem("category");
            display.innerHTML = "Value of checkLocalStorage variable: " + checkLocalStorage + "<br>";
            //console.log("Value of checkLocalStorage variable: " + checkLocalStorage);
        } else {
            displayMessage.innerHTML = "Sorry, your browser does not support Web Storage..." + "<br>";
            //console.log("Sorry, your browser does not support Web Storage...");
        }
        display.innerHTML += "Value of nameOfCategory varaible: " + nameOfCategory + "<br>";
        //console.log("Value of nameOfCategory varaible: " + nameOfCategory);
    }); // end of a.click function
});

Answer 2

这是因为你将它作为一个函数store()并在点击<a>元素时触发它。这是我对你的代码的编辑

<head>
 
</head>

<body>

    <table>
        <tr>
            <th>Category</th>
        </tr>
        <tr>
            <td><a href="#" categoryName="Fruits">Fruits</a>
            </td>
        </tr>
        <tr>
            <td><a href="#" categoryName="Vegetables">Vegetables</a>
            </td>
        </tr>
        <tr>
            <td><a href="#" categoryName="Clothes">Clothes</a>
            </td>
        </tr>
    </table>

    <div id="result">
    </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script>
        function activateLinks() {
            $("a").click(function(event) {
                event.preventDefault();
                
                var display = document.getElementById("result");
                var nameOfCategory = $(this).attr("categoryName");
                nameOfCategory = String(nameOfCategory);
                
                if (typeof(Storage) !== "undefined") {
                    // Store
                    localStorage.setItem("category", nameOfCategory);
                    // Retrieve
                    var checkLocalStorage = localStorage.getItem("category");
                    display.innerHTML = "Value of checkLocalStorage variable: " + checkLocalStorage + "<br>";
                    //console.log("Value of checkLocalStorage variable: " + checkLocalStorage);
                } else {
                    displayMessage.innerHTML = "Sorry, your browser does not support Web Storage..." + "<br>";
                    //console.log("Sorry, your browser does not support Web Storage...");
                }
                display.innerHTML += "Value of nameOfCategory varaible: " + nameOfCategory + "<br>";
                //console.log("Value of nameOfCategory varaible: " + nameOfCategory);
            }); // end of a.click function
        }
        
        activateLinks();
    </script>

</body>

JavaScript localStorage无法首次点击

2 个答案: