使用javascript从本地存储中删除

Deleting from local storage using javascript

本文关键字：存储 删除 javascript 使用      更新时间：2023-09-26

我正在使用数据属性在我的网站上存储有关产品的信息。一旦这些被添加到购物篮中，我想允许用户删除任何项目，如果他们愿意的话。

我在localstorage中存储项目的方式是作为一个带有键"basket"的json javascript对象。如果我在添加了两台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));
    }
  }

您需要读取存储的对象，并通过其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真正的问题在于remove函数。每次点击按钮后，您需要设置新的localStorage对象：

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