為什么我的 localStorage 代碼不起作用？

Question

我正在嘗試使 div div 消失並保持消失，即使用戶回來也是如此。 它似乎沒有做我想要的。 當我按下按鈕時，什么也沒有發生。 甚至 localStorage 的值都沒有改變......

localStorage.done = localStorage.done || false;
$('#myButton').addEventListener('click', function() {
    if (!localStorage.done) {
        localStorage.done = true;
        $('#myDiv').style.display = "none";

    }
});

Answer 1

您的localStorage代碼實際上正在工作（即使它建議使用其 getter/setter 方法而不是直接屬性訪問）。

你的問題是這樣的：

$('#myButton').addEventListener('click', function() {

.addEventListener不知道 .addEventListener 你只想調用.bind()

    localStorage.done = localStorage.done || false;
    $('#myButton').bind('click', function() {
        if (!localStorage.done) {
            localStorage.done = true;
            $('#myDiv').hide();
        }
    });

Answer 2

localStorage 只存儲字符串。 因此，localStorage.done = false 序列化為“false”。 以下代碼將解決您的問題（請參閱JSFiddle ）：

 localStorage.done = localStorage.done || "false";
 document.getElementById('myButton').addEventListener('click', function() {
   if (localStorage.done == "false") {
     localStorage.done = "true";
     document.getElementById('myDiv').style.display = "none";
   }
 });

注意，為了避免與 jQuery 混淆，我使用了標准 DOM “getElementById”。 您也可以考慮使用“0”和“1”來代替“true”和“false”。

雖然W3 規范中沒有此限制，但它適用於當前瀏覽器。 有關更多信息，請參閱此帖子。 快樂編碼！