从本地存储中删除整个阵列答案

【问题标题】：Remove entire array from local storage从本地存储中删除整个阵列
【发布时间】：2019-12-03 18:34:31
【问题描述】：

如何在没有localStorage.clear(); 方法的情况下完全删除 localStorage？

我有一个购物车，您可以在其中存储您要购买的产品，并且存储在本地存储中进行。目前“清除购物车”按钮适用于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 等但无济于事。

下图显示了我的“空”本地存储：

【问题讨论】：

.removeItem( 'items' ) 和 if (localStorage.getItem("items")) ?由于 localStorage 项目始终是字符串，因此在不解析的情况下检查字符串的长度会给出错误的结果，因为空数组的长度为 0，但表示空数组 "[]" 的字符串的长度为 2。

标签： javascript php jquery local-storage

【解决方案1】：

localstorage.get() 返回的是字符串而不是 JSON，所以您需要做的是解析字符串，即 localStorage.getItem('items') 返回长度等于 2 的 "[]"。您需要做的是 JSON.parse(localstorage.getItem('item')).length

【讨论】：

实际上这适用于我的情况；修改为此代码 if (JSON.parse(localStorage.getItem('items')).length === 0) { clearCart(); }

【解决方案2】：

您可能正在寻找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);
}

【讨论】：