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

Question

我希望这是个好问题。我正在做一个购物车项目。我一直在网上搜索有关购物车的不同教程。我正在尝试用 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);
    }

Answer 1

你不能这样比较对象。

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)}`);

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

Compare JavaScript objects

因为你的对象是用一个 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);

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

Delete Session Storage - Shopping Cart Project

javascript

shopping-cart

if-statement

session-storage

local-storage