使用javascript从本地存储对象内的数组中删除项目答案

【问题标题】：Remove an item from an array inside a local storage object with javascript使用javascript从本地存储对象内的数组中删除项目
【发布时间】：2016-09-27 23:56:13
【问题描述】：

我有localStorage['cart'] 和其中的数组“产品”。来自localStorage.getItem('cart') 的检索数据看起来像

{"products":
[
    {
    "id":"01",
    "name":"Product Name 01",
    "price":"Product Price 01",
    "image":"Product Imagem 01"
    },
    {
    "id":"02",
    "name":"Product Name 02",
    "price":"Product Price 02",
    "image":"Product Imagem 02"
    },
]}

我需要通过onclick= 事件，使用id 删除products 数组中的特定项目。

编辑

var json = JSON.parse(localStorage["cart"]);
for (i=0; i < x; i++){
          if (json.products.[i].id == id){
            json.splice(i,1);
        }
      }

x 是 json.products 的长度。

我该怎么做？

【问题讨论】：

尝试编写一些代码，当部分代码不起作用时返回给我们。
欢迎来到 SO。请访问help center 了解询问内容和方式。我们喜欢minimal reproducible example
具体哪一部分不知道怎么做？将localstorage内容转回对象，通过id查找对象，还是移除找到的对象？
所以从本地存储读取字符串，将其转换为数组，删除项目，将其转换回字符串，重置本地存储。
我通过splice 命令找到了一些相关信息，例如我的编辑。但不要工作......

标签： javascript local-storage

【解决方案1】：

这是基本思想。向您展示如何从 localStorage 解析对象和怎么写回去。

(function() {
  //prime cache
  var obj = {
    "products": [{
      "id": "01",
      "name": "Product Name 01",
      "price": "Product Price 01",
      "image": "Product Imagem 01"
    }, {
      "id": "02",
      "name": "Product Name 02",
      "price": "Product Price 02",
      "image": "Product Imagem 02"
    }]
  };
  localStorage.setItem("cart", JSON.stringify(obj));

}());

function removeItem(id) {
  var index = -1;
  var obj = JSON.parse(localStorage.getItem("cart")) || {}; //fetch cart from storage
  var items = obj.products || []; //get the products
  for (var i = 0; i < items.length; i++) { //loop over the collection
    if (items[i].id === id) { //see if ids match
      items.splice(i, 1); //remove item from array
      break; //exit loop
    }
  }
  localStorage.setItem("cart", JSON.stringify(obj)); //set item back into storage
}

console.log(localStorage.cart);
removeItem("01");
console.log(localStorage.cart);

【讨论】：