簡體   English   中英

刪除會話存儲-購物車項目

[英]Delete Session Storage - Shopping Cart Project

我希望這是一個好問題。 我正在從事購物車項目。 我一直在通過購物車上的不同教程來搜尋互聯網。 我試圖用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);
    }

您不能比較這樣的對象。

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM