Question

我正在使用数据属性来存储我网站上的产品信息。将这些添加到购物篮后，我希望允许用户删除任何项目。

我在localstorage中存储项目的方式是作为json javascript对象，其中包含键＆＃34; basket＆＃34;。如果我在添加了两个iMac和一个MacBook Pro之后登录到控制台，这就是输出。

"basket: {"iMac":{"ID":"2","Name":"iMac","Description":"2011 model 27 inch screen","stockQuantity":"15","Price":"1199.99","basketQuantity":2},"MacBook Pro Retina":{"ID":"7","Name":"MacBook Pro Retina","Description":"2015 MacBook Pro Retina display","stockQuantity":"30","Price":"999","basketQuantity":1}}"

我尝试克服此问题的方法是向删除按钮data-name="iMac"添加数据属性。在此单击按钮后，使用localStorage.removeItem(key)删除所选项目。

我发现这有问题，因为在使用localStorage.removeItem(key)时我必须使用密钥"basket"，并且无法从此处进一步访问该对象。

我要求的是，如果有办法使用密钥"basket"访问该对象。

我正在使用此功能为页面上的每个删除按钮添加一个事件监听器

function setDeleteButtons(){
  removeButtons = document.querySelectorAll(".removeItem");
  var basketStorage = localStorage.getItem("basket");
  jsonBasket = JSON.parse(basketStorage);

  for(i=0; i<removeButtons.length; i++){
      removeButtons[i].addEventListener("click", function(e){
        delete jsonBasket[e.currentTarget.dataset.name];
      });
      localStorage.setItem("basket", JSON.stringify(jsonBasket));
    }
  }

Answer 1

您需要从内部key对象中读取存储的对象并从其basket中删除项目：

// Read and parse entire stored object
var basket = JSON.parse(localStorage.getItem("basket"));

// Delete specific item from the basket, key might be "iMac", etc.
delete basket[key];

// Save new basket
localStorage.setItem("basket", JSON.stringify(basket));

UPD。真正的问题在于删除功能。每次单击按钮后，您需要设置新的localStorage对象：

removeButtons[i].addEventListener("click", function (e) {
    delete jsonBasket[e.currentTarget.dataset.name];
    localStorage.setItem("basket", JSON.stringify(jsonBasket));
});

使用javascript从本地存储中删除

1 个答案: