如何改进这个 sessionstorage 命名 system/for 循环？

Question

我有一个使用会话存储来存储项目的购物车。当用户单击 "add to cart" 时，它会存储一个新对象，该对象的键等于点击次数，值等于项目名称。然后我使用这个 for 循环来读取值：

for (var i = 0; i < sessionStorage.length -1; i++) {
if( sessionStorage.getItem(i + 1) != null ) {
...
"<span class='item'>" +  sessionStorage.getItem(i + 1) + "</span>" +

问题来了。假设我从购物车中删除了 5 件商品中的第 3 件。如果我添加另一个项目，它将被称为“6”，但我的项目将是 1、2、4、5、6。我的 for 循环将只识别项目 1、2、4 和 5。我如何识别项目 6 ？我通过让我的 for 循环检查最多 50 个来快速修复，但这看起来很草率并且占用大量资源...

Answer 1

从技术上讲，for each 循环可以解决您的问题；

for (var e in sessionStorage) {
    document.write(e + '=>' + sessionStorage[e]);
}

然而，无论您如何访问您的元素，以这种方式使用 sessionStorage 都是一个糟糕的设计选择。首先，由于 sessionStorage 是同一页面中不同脚本之间的共享资源，任何其他脚本（例如您可能使用的库）可能会向 sessionStorage 添加一些内容，并且您的脚本会变得一团糟。封装你的数据，比如用 JSON 序列化它，并用你的脚本的唯一键放在 sessionStorage 下，从长远来看会帮助你更多。

如何改进这个 sessionstorage 命名 system/for 循环？

How to improve this sessionstorage naming system/for loop?

html

javascript

for-loop

sessionstorage