javascript - 使用本地存储在按钮类之间切换

Question

当我按下按钮时，我尝试使用 javascript 在类之间切换。同时在页面刷新时保持它们的状态相同。下面的脚本运行正确，因为我看到按钮在单击时更改状态。然而，当页面刷新时，一切都消失了。我确实在这个论坛上阅读了有关在 jquery 中使用 cookie 的信息，但我认为我会使用本地存储，因为为什么不呢。
请问我做错了什么？

<button name='idButton'  class='glyphicon glyphicon-eye-open' id=confirmButton onclick='addBasket(this)'>Click Me</button>

<script>
     function addBasket($element) {
    var className = $element.getAttribute("class");
    if (className == "glyphicon glyphicon-eye-open") {
        $element.className = "glyphicon glyphicon-eye-close";
    }
    else {
        $element.className = "glyphicon glyphicon-eye-open";
    }

    localStorage.setItem("item",  $element); //Store the element so it can be accessed later.
     localStorage.setItem("class", $element.className); //Store the last class name
}
localStorage.getItem("item").className = localStorage.getItem("class").name;
//The last line should run when page loads because it is outside the scope of the method  
</script>

Answer 1

您无法在 localStorage 中存储元素。它只存储字符串。

尝试以下操作:

//Storing
localStorage.setItem("class", className);

//Page Load (after element exists)
var btnClass = localStorage.getItem("class")
if (btnClass) {
  document.getElementById('confirmButton ').className = btnClass;
}

对于更高级的对象，您可以使用 JSON.stringify 来存储，并在从存储中检索时使用 JSON.parse