时间戳

首页 > 解决方案 > 删除会话存储 - 购物车项目

javascript - 删除会话存储 - 购物车项目

问题描述

我希望这是一个好问题。我正在做一个购物车项目。我一直在网上搜索购物车上的不同教程。我正在尝试用 Vanilla Javascript 编写我的。我在从会话存储中删除购物车项目时遇到问题。

以下是我的会话存储中当前的内容。如您所见，它是一个对象数组。

[{"id":"8","name":"Candy 
Skull","price":"20000","image":"../images/candyskull- 
min.JPG","qty":"1"},{"id":"5","name":"Upsidedown 
House","price":"20000","image":"../images/upsidedownhouse- 
min.JPG","qty":"1"},{"id":"6","name":"Brooklyn 
Window","price":"30000","image":"../images/brooklynwindow- 
min.JPG","qty":"1"},{"id":"4","name":"Hand That 
Feeds","price":"40000","image":"../images/handthatfeeds- 
min.JPG","qty":"1"}]

我想遍历数组并从购物车存储中删除匹配的对象。

下面是用于生成 .remove-from-cart 按钮的 JS 代码。如您所见，它包含所有数据集信息。

<td>
   <span class="remove-from-cart">
      <b data-id="${value.id}" data-name="${value.name}" data- 
      price="${value.price}" data-image="${value.image}" data- 
      qty="${value.qty}">X</b>
   </span>
</td>

要测试我到目前为止所做的功能，您可以访问 www.dancruzstudio.com/shop

我无法正常工作的函数是 removeFromStorage() 函数。出于某种原因，在将对象与数组中的对象进行比较时，我永远不会返回真正的布尔值，即使购物车中有应该匹配的项目也是如此。我哪里错了？我希望有人能帮帮忙。下面是我的 JS 代码的副本。

我正在使用的方法是在 JS 生成的删除项目按钮中具有相同的数据集值，然后将该数据集解析为一个对象，并将其与会话存储数组中的对象进行比较，该数组在 removeFromStorage() 函数中称为 shopItems。我希望这些信息足以让某人看到我的问题。先感谢您。

    // Remove item from DOM
    document.querySelector('#cart-list').addEventListener('click', 
    removeFromCart)

    function removeFromCart(e) {
    if(e.target.parentElement.classList.contains('remove-from-cart')) {
    //Remove from DOM
     e.target.parentElement.parentElement.parentElement.remove(); 

     //Remove from Session Storage
            removeFromStorage(e.target.dataset);
     }
     }

     // remove from Session storage
     function removeFromStorage(removedItem){

    let shopItems;
    if(sessionStorage['sc'] == null){
        shopItems = [];
    } else {
        shopItems = JSON.parse(sessionStorage['sc'].toString());
    }

    var compare = JSON.parse(JSON.stringify(removedItem))

    shopItems.forEach(function(item, index){

        if(compare === item){
            console.log(compare);
            console.log(item);
            // shopItems.splice(index, 1);
        }
    });
    sessionStorage['sc'] = JSON.stringify(shopItems);
    }

标签： javascriptif-statementlocal-storageshopping-cartsession-storage

解决方案

你不能像这样比较对象。

let a = {p:1};
let b = {p:1};
console.log(`a ===b ? ${a===b}`);

如果您的对象相当简单，您可以尝试比较它们的字符串化表示：

let a = {p:1};
let b = {p:1};
const compare = (x,y) => {
  return JSON.stringify(x) === JSON.stringify(y);
}

console.log(`a === b ?  ${compare(a,b)}`);

或编写您的自定义比较函数（这可能具有挑战性）：

比较 JavaScript 对象

由于您的对象用 id 装饰，因此最简单的方法是通过以下方式识别它们：

let storage = [{"id":"8","name":"Candy Skull", "price":"20000","image":"../images/candyskull- min.JPG","qty":"1"},{"id":"5","name":"Upsidedown House","price":"20000","image":"../images/upsidedownhouse- min.JPG","qty":"1"},{"id":"6","name":"Brooklyn Window","price":"30000","image":"../images/brooklynwindow- min.JPG","qty":"1"},{"id":"4","name":"Hand That Feeds","price":"40000","image":"../images/handthatfeeds- min.JPG","qty":"1"}];

let items = [{"id":"6","name":"Brooklyn Window","price":"30000","image":"../images/brooklynwindow- min.JPG","qty":"1"}, {"id":"5","name":"Upsidedown House","price":"20000","image":"../images/upsidedownhouse- min.JPG","qty":"1"}];
const pluck = (acc, crt) => {
acc.push(crt.id);
return acc;
};

let storageIndexes = storage.reduce(pluck, []);
let itemsIndexes = items.reduce(pluck, []);
let removeIndexes = [];
itemsIndexes.forEach(id => removeIndexes.push(storageIndexes.indexOf(id)));
console.log('storage', storage);
console.log('removed items', items);
removeIndexes.sort().reverse().forEach(index => storage.splice(index,1));
console.log('remaining storage', storage);

推荐阅读