如何改进这个会话存储命名系统/for循环？

Question

我有一个使用 sessionStorage 存储商品的购物车。当用户单击“添加到购物车”时，它会存储一个新对象，其键等于点击次数，值等于项目名称。然后我使用这个 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 下，这将在长期内为您提供更多帮助。