當localStorage為null時，為什么它仍然像鍵和值一樣工作？

Question

我寫了一些簡單的代碼來顯示圖片，然后讓圖片從左向右移動然后一直向左移動。 我使用localStorage讓它記住頁面加載時圖片的位置。

代碼沒有錯。

讓我感到困惑的是，當我清除了存儲在localStorage中的所有鍵之后，我的代碼仍然像以前一樣工作（它仍然記得頁面加載時圖片的位置）。

下面是代碼，console.log顯示localStorage為null。

我的問題是，當localStorage被清除時，它如何像具有鍵和值一樣工作。 這里的邏輯是什么？

<img style="position:absolute;" src="Cat Walk.gif">

<script>

var img = document.getElementsByTagName('img')[0];
img.style.left = '0px';

var walkForwards;

function catWalk() {
    var currentLeft = parseInt(img.style.left);

    if(walkForwards === 'true' && (currentLeft > (window.innerWidth-img.width))) {
        walkForwards = 'false';
    }
    if(walkForwards === 'false' && (currentLeft <= 0)) {
        walkForwards = 'true';
    }

    if(walkForwards === 'true') {
        img.style.left = (currentLeft + 10) + 'px';
    }
    else{
        img.style.left = (currentLeft - 10) + 'px';
    }
    console.log(localStorage.getItem('currentLoc'), localStorage.getItem('direc'));
}

window.setInterval(catWalk, 50);

window.onbeforeunload = function() {
    localStorage.setItem('currentLoc', img.style.left);
    localStorage.setItem('direc', walkForwards);
};

img.style.left = localStorage.getItem('currentLoc');
walkForwards = localStorage.getItem('direc');

localStorage.clear();

</script>

Answer 1

當用戶轉到保存了最后一個值的頁面時，

img.style.left = localStorage.getItem('currentLoc');
walkForwards = localStorage.getItem('direc');

正確加載它們。 然后，它們被刪除

localStorage.clear();

從現在開始，無論何時當您console.log從localStorage記錄項目時，它們都將被取消設置，即對getItem的調用將返回null 。

但是，當用戶重新加載，關閉選項卡或離開頁面時，那么當前值將再次保存：

window.onbeforeunload = function() {
    localStorage.setItem('currentLoc', img.style.left);
    localStorage.setItem('direc', walkForwards);
};

因此，它們在下一頁加載時可用。