[英]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)}`);
或編寫您的自定義比較功能(可能會很困難):
由於您的對象是用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.