localStorage清空后仍能记住图片位置？技术疑问求助

咱们一步步拆解你的代码运行流程，就能瞬间明白为什么清空localStorage后，图片还能“记住”之前的位置：

• 先读取，后清空，变量已经拿到值了
  页面加载时，你的代码先执行了这两行：

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

  这时候localStorage里还存着上次页面关闭时保存的位置和方向，所以这两行已经把这些值读取出来，存到了内存里的img.style.left和walkForwards变量中。

  紧接着你才调用localStorage.clear();——这确实会把localStorage里的所有键值对删掉，但这时候已经晚了！内存里的变量已经拿到了之前的值，清空存储根本不会影响这些已经存在于内存里的数据。

• 控制台显示null的逻辑
  你的catWalk函数里打印的是localStorage.getItem('currentLoc')和localStorage.getItem('direc')，但这时候localStorage已经被清空了，所以打印结果自然是null。但图片的位置和移动方向是由内存里的变量控制的，和当前localStorage的状态完全没关系。

快速验证的小实验 #

你可以把localStorage.clear();挪到读取值的代码前面试试：

localStorage.clear(); // 先清空存储
img.style.left = localStorage.getItem('currentLoc'); // 再读取，这时候拿到的就是null
walkForwards = localStorage.getItem('direc');

这时候页面加载时，图片就会回到初始的0px位置，因为读取不到之前存储的值了。

另外补充个小细节：当localStorage.getItem('currentLoc')返回null时，img.style.left = null不会覆盖你之前设置的img.style.left = '0px';，所以如果没读到值，图片会保持初始位置。

内容的提问来源于stack exchange，提问作者Youdao