[英]Remove entire array from local storage
如何在沒有localStorage.clear();
情況下完全刪除localStorage localStorage.clear();
方法?
我有一個購物車,您可以在其中存儲您將要購買的產品,並且存儲在本地存儲中進行。 目前“清除購物車”按鈕與localStorage.clear();
方法,但我也有一個表格,您可以在其中刪除單個產品。 但是,如果您使用同一行上的“刪除”按鈕刪除整個表,並且它恰好是最后一個產品,則本地存儲仍將有一個空數組,並被視為 NOT null 。
這是我刪除項目的方法:
function removeItem(itemId) {
//removes the parent row of table
$('#product-table').on('click', '.remove-item', function(e) {
$(this).closest('tr').remove();
});
var index = -1;
var obj = JSON.parse(localStorage.getItem("items")) || {}; //fetch cart from storage
var items = obj || []; //get the products
$.each(items, function(key, value) {
if (key === itemId) {
items.splice(key, 1); //remove item from array
}
});
localStorage.setItem("items", JSON.stringify(obj)); //set item back into storage
sum = 0;
$.each(items, function(key, value) {
sum += value.itemPrice;
});
$("#summary").html(sum.toFixed(2) + "€");
updateCartCount();
}
它正確刪除了項目,但是每當我刪除最后一個產品時, table
元素並添加一個段落,說“您的購物車是空的。返回商店”。
以下功能如下:
function hideElements() {
if ($(".cart-wrapper").length) {
if (localStorage.getItem("items") === null) {
$("#products").css("display", "none");
$("#empty").css("display", "block");
$(".btn-clear").css("display", "none");
} else {
$("#products").css("display", "block");
$("#empty").css("display", "none");
$(".btn-clear").css("display", "block");
}
}
}
hideElements 函數不會將本地存儲識別為空,因為它表明存在一個空數組對象。
如果移除的產品是購物車上的最后一個產品,我如何通過移除整個本地存儲來實現這一點? 我嘗試了localStorage.getItems("items").length != 0
等,但無濟於事。
下圖顯示了我的“空”本地存儲:
localstorage.get()
返回的是字符串而不是 JSON,因此您需要做的是解析字符串,即localStorage.getItem('items')
返回長度等於 2 的"[]"
。您需要做的是JSON.parse(localstorage.getItem('item')).length
您可能正在尋找localStorage.removeItem()
。
更好的是,您應該重構一些東西,以便有一些函數專門負責管理本地存儲中的 items 數組:
function loadItems() {
// Returns the value of items, or an empty array.
return JSON.parse(localStorage.getItem("items") || "[]");
}
function saveItems(itemsArr) {
localStorage.setItem("items", JSON.stringify(itemsArr));
}
// Remove item with given ID (assuming each element in the array is e.g. `{id: 123}`)
const itemId = 123;
saveItems(loadItems().filter(item => item.id !== itemId));
// Update cart HTML elements:
if ($(".cart-wrapper").length) {
const haveItems = loadItems().length > 0;
$("#products").toggle(!haveItems);
$("#empty").toggle(haveItems);
$(".btn-clear").toggle(!haveItems);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.