javascript - 当应用程序通过实时服务器运行时，localStorage 是否应该保留？

Question

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

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

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

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

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

MDN documentation提及:

The read-only localStorage property allows you to access a Storageobject for the Document's origin; the stored data is saved acrossbrowser sessions. localStorage is similar to sessionStorage, exceptthat while data stored in localStorage has no expiration time, datastored in sessionStorage gets cleared when the page session ends —that is, when the page is closed. (Data in a localStorage objectcreated in a "private browsing" or "incognito" session is cleared whenthe last "private" tab is closed.)

实时服务器上的每次刷新或页面更改是否代表一个全新的设备历史记录？ (再次强调，这似乎有道理，但仍然不太可能。不过，我很高兴自己错了。)

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

---

编辑 - 这是一些相关代码:

在全局范围内:

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

封装 - 单击 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 的帮助。