当应用程序通过实时服务器运行时，localStorage 是否应该持续存在？

Question

我正在通过 VSCode 的 Live Server 扩展运行应用程序。

此应用程序（电子商务网站）将商品保存到 cartItems 数组中，只要单击 addToCart 按钮，该数组就会写入 localStorage。我可以在 DevTools/Application/LocalStorage 中看到，当执行指定的操作时，项目正在正确保存。

但是，每当我刷新页面或导航到同一应用程序中的不同页面时，我的 localStorage 都会被清除。

在向 localStorage 写入项目时，我尝试调用 localStorage 简写，以及更明确的 window.localStorage。两者都没有解决这个问题。

当应用程序在本地或通过实时服务器运行时，localStorage 是否不会持续存在？我怀疑应该这样做，但我做错了其他事情。

MDN documentation 提到：

只读的localStorage 属性允许您访问Storage Document 来源的对象；存储的数据保存在 浏览器会话。 localStorage 类似于 sessionStorage，除了 虽然存储在localStorage 中的数据没有过期时间，但数据 当页面会话结束时，存储在 sessionStorage 中的内容会被清除 — 也就是说，当页面关闭时。 （localStorage 对象中的数据 在“隐私浏览”或“隐身”会话中创建的内容在以下情况下被清除 最后一个“私人”标签已关闭。）

会不会是实时服务器上的每次刷新或页面更改都代表了全新的设备历史？ （再一次，这似乎是合理的，但仍然不太可能。不过，我很高兴自己错了。）

提前感谢您提供的任何指导。

---

编辑 - 以下是一些相关代码：

在全局范围内：

const cartItems = [];
localStorage.setItem('cartItemsKey', JSON.stringify(cartItems));
localStorage.getItem('cartItemsKey');
const cartItemsInStorage = localStorage.getItem('cartItemsKey');

Encapsulated - 单击 addToCart 按钮时会触发此函数。省略大部分内容，除了与localStorage 有关的部分，为简洁起见：

function addToCart (button) {
    // Create newCartItem object using relevant data
    cartItems.push(newCartItem);
        localStorage.removeItem('cartItemsKey');
        localStorage.setItem('cartItemsKey', JSON.stringify(cartItems));
}

再次，根据下面的屏幕记录，我可以看到项目已成功保存到 localStorage。当我刷新或更改页面时遇到问题。

Answer 1

更新：

我发现了问题所在。

我在全局范围内有以下代码：

const cartItems = [];
localStorage.setItem('cartItemsKey', JSON.stringify(cartItems));
localStorage.getItem('cartItemsKey');
const cartItemsInStorage = localStorage.getItem('cartItemsKey');

在此代码之前调用：

function addToCart (button) {
    // Create newCartItem object using relevant data
    cartItems.push(newCartItem);
        localStorage.removeItem('cartItemsKey');
        localStorage.setItem('cartItemsKey', JSON.stringify(cartItems));
}

因此，每次重新加载页面时，我都会有效地将一个空数组重新写入 localStorage。

我已经通过删除.setItem 行解决了这个问题，如下所示：

const cartItems = [];
localStorage.getItem('cartItemsKey');
const cartItemsInStorage = localStorage.getItem('cartItemsKey');

现在，我将我最初的const cartItems = []; 重写为条件语句，我首先检查一下cartItemsKey 是否存在于全局存储中。如果是这样，我将设置cartItems = JSON.parse(localStorage.getItem('cartItemsKey')。否则，我将设置cartItems = [];。

非常感谢@Alex Rasidakis 的热心帮助。

Answer 2

你能给我们一些代码吗？我不认为 Live Server 有任何东西 与您所说的本地存储故障有关。

我很确定这是浏览器的问题。也许您正在以某种方式使用硬刷新 每次你都提神醒脑。也许您有一些清除本地存储的设置或某些浏览器扩展程序，每次刷新时都会清除您的页面。

尝试从其他浏览器（如 Mozilla、Edge 等）打开您的本地主机地址。 并告诉我们它的行为。