localstorage 包含插入数据之前的数据答案

【问题标题】：localstorage contains data before data is insertedlocalstorage 包含插入数据之前的数据
【发布时间】：2020-06-15 13:29:04
【问题描述】：

假设我们在本地存储中有一个用户对象

window.localStorage.setItem('user', { cars: [] })

用户单击按钮并调用函数foo，它执行此操作：

const user = JSON.parse(window.localStorage.getItem('user'));
console.log('user: ', user); // user has data here - WHY???

const flag = false;

if (!flag) {
    user.cars = [
        {
            name: 'lambo',
        }
    ];
    const updatedUser = user.cars;
    window.localStorage.setItem('user', JSON.stringify(updatedUser));
}

在console.log("user: ", user)，用户对象已经包含一个数组，其中包含lambo 的1 个条目，但是直到稍后才添加该条目.. 这怎么可能？

【问题讨论】：

window.localStorage.setItem 很可能被同一个或其他一些触发器调用并设置了值。
因为您在页面的先前执行时将数据放在本地存储中。
@RobbyCornelissen 那么有什么办法呢？
致所有对此问题投反对票的人——这不是解决问题的方法。这不是 SO 的意义所在。如果你要投反对票，至少提供一个资源的理由，这样我就可以有办法解决这个问题
如果您不希望数据在页面重新加载和浏览器会话中存活，只需将其存储在变量中即可。如果您希望它在页面重新加载后仍然存在，请使用sessionStorage。如果您希望它在浏览器会话中继续存在，请使用localStorage。

标签： javascript local-storage

【解决方案1】：

您的测试似乎没有考虑到Local Storage 数据在您重新启动页面或关闭并重新打开浏览器时仍然存在。因此，您的数据在您加载和测试之前已存储。

如果你保存来自同一个域的数据，本地存储也会保存来自不同项目的数据，这通常是本地开发服务器的情况（它们大多数使用 localhost 并且浏览器为它们共享内存“池”，因为它们相同）主机名）。

如果您希望在用户关闭并再次打开浏览器时清除数据，请使用Session Storage。但请注意，页面刷新不会清除会话存储。用法完全一样：

window.sessionStorage.setItem("hello", "world");

但是，如果您确实使用本地存储并且需要清除用户保存的所有内容，则可以使用clear 方法。

window.localStorage.clear();

我看不出在每次页面加载时都这样做的原因，因此您可能需要添加一些条件（例如检查用户是否已注销或其他内容）。

【讨论】：

我实际上在 Devtools -> Applications -> localStorage 中清除了 localStorage 数据，以确保那里绝对没有任何内容。重新加载页面后，会出现与我在代码中描述的相同的问题。因此，当我刚刚清除它时，我很难理解为什么我的 localStorage 里面有东西
我建议您在进行测试之前使用window.localStorage.clear()。与以下情况相比，您的代码“执行”乱序的可能性非常非常小：1. 您无法在正确的位置清除缓存，2. 浏览器包含无法清除缓存的缺陷或 3.浏览器包含一个缓存错误，该错误会从存储中加载以前清除的数据。