javascript - 检索 localStorage 后函数停止工作

Question

我在两个列表上使用 localStorage:水果架和水果篮。

如果您点击水果架上的水果，它会将其附加到水果篮中，并且如果您刷新页面，它仍然在那里 - 所以它会记住所有内容。

问题是:如果您添加一种水果，然后刷新页面，则无法添加更多水果，程序完全停止工作。

我添加了一个“清除本地存储”按钮，该按钮有效。如果您点击它并刷新页面，您可以再次添加水果。但是，一旦添加了一种水果并刷新页面，您就无法向水果篮添加更多项目。

我不确定如何为问题命名，因此很难搜索解决方案(我已经尝试过!)。

有人能指出我正确的方向吗？ :-)

Fiddle(由于 localStorage，我无法在这里使用 SO Snippet): https://jsfiddle.net/nrv269hc/7/

JS:

(function() {

  var btnClearStorage = document.querySelector('.btn-delete-all');
  var fruitShelf = document.querySelector('.fruit-shelf');
  var fruitShelfItems = document.querySelectorAll('.fruit-shelf li');
  var fruitBasket = document.querySelector('.fruit-basket');

  // Store current state of fruitSheflf & fruitBasket
  function storestate() {
    localStorage.fruitShelf = fruitShelf.innerHTML;
    localStorage.currentFruitBasket = fruitBasket.innerHTML;
  };

  function retrievestate() {

    // Retrieve fruits left from shelf
    if (localStorage.fruitShelf) {
      fruitShelf.innerHTML = localStorage.fruitShelf;
    }
    // Retrieve stored fruits 
    if (localStorage.currentFruitBasket) {
      fruitBasket.innerHTML = localStorage.currentFruitBasket;
    }
  };

  retrievestate();

  for (var i = 0; i < fruitShelfItems.length; i++) {

    fruitShelfItems[i].addEventListener('click', function(event) {

      fruitBasket.appendChild(this);
      storestate();
    });

  }

  // Clear Local Storage
  btnClearStorage.addEventListener('click', function() {

    localStorage.clear(fruitShelf);
    localStorage.clear(fruitBasket);

  });

})();

Answer 1

您需要更新fruitShelfItems，因为HTML 在retrievestate 之后更新。

查看更新的JsFiddle

(function() {

  var btnClearStorage = document.querySelector('.btn-delete-all');
  var fruitShelf = document.querySelector('.fruit-shelf');
  var fruitShelfItems = document.querySelectorAll('.fruit-shelf li');
  var fruitBasket = document.querySelector('.fruit-basket');

  // Store current state of fruitSheflf & fruitBasket
  function storestate() {
    localStorage.fruitShelf = fruitShelf.innerHTML;
    localStorage.currentFruitBasket = fruitBasket.innerHTML;
  };

  function retrievestate() {

    // Retrieve fruits left from shelf
    if (localStorage.fruitShelf) {
      fruitShelf.innerHTML = localStorage.fruitShelf;
    }
    // Retrieve fruit basket
    if (localStorage.currentFruitBasket) {
      fruitBasket.innerHTML = localStorage.currentFruitBasket;
    }
    // you need to update the fruitShelfItems as the HTML is update after retrievestate
    fruitShelfItems = document.querySelectorAll('.fruit-shelf li');
  };

  retrievestate();

  for (var i = 0; i < fruitShelfItems.length; i++) {

    fruitShelfItems[i].addEventListener('click', function(event) {

      fruitBasket.appendChild(this);
      storestate();
    });

  }

  // Clear Local Storage
  btnClearStorage.addEventListener('click', function() {

    localStorage.clear(fruitShelf);
    localStorage.clear(fruitBasket);

  });

})();