Question

我写了一些简单的代码显示一张图片，让图片从左向右移动，然后永远向左移动。我使用localStorage让它记住页面加载时图片的位置。

代码没有错。

让我感到困惑的是，在我清除了localStorage中存储的所有密钥之后，我的代码仍然像以前一样工作（它仍然记得图片在页面加载时的位置）。

下面是代码，console.log显示localStorage为空。

我的问题是当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);
};

因此，它们可在下一页加载时使用。

当localStorage为null时，为什么它仍然像它有键和值一样工作？

1 个答案: