使用 javascript 从本地存储中删除

Question

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

我在 localstorage 中存储项目的方式是 json javascript 对象，键为 "basket"。如果我在添加了两台 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 从本地存储中删除

Deleting from local storage using javascript

javascript

custom-data-attribute