localStorageを取得した後、関数が機能しなくなります

debugcn 投稿 Dev

大

私は2つのリスト、fruit-shelfとfruit-basketでlocalStorageを使用しています。

果物の棚から果物をクリックすると、果物のバスケットに追加されます。ページを更新すると、まだそこにあります。そのため、すべてが正しく記憶されます。

問題は、フルーツを1つ追加してからページを更新すると、フルーツを追加できなくなり、プログラムが完全に機能しなくなることです。

動作する[ローカルストレージのクリア]ボタンを追加しました。それをクリックしてページを更新すると、フルーツを再度追加できます。ただし、フルーツを1つ追加してページを更新するとすぐに、フルーツバスケットにアイテムを追加することはできません。

問題に名前を付ける方法がわからないので、解決策を探すのは難しいです（私は試しました！）。

誰かが私を正しい方向に向けることができますか？:-)

フィドル（localStorageのため、ここではSOスニペットを使用できませんでした）：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);

  });

})();

バドル

HTMLはretrievestateの後に更新されるため、fruitShelfItemsを更新する必要があります。

更新された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);

  });

})();

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]