檢索localStorage後功能停止工作

Question

我在兩個列表上使用localStorage，水果架& fruit-basket。

如果您點擊水果架上的水果，它會將其添加到水果籃中，並且如果刷新頁面，它仍然存在 - 因此它會記住所有應有的東西。

問題是：如果您添加一個水果，然後刷新頁面，您不能添加更多的水果，程序完全停止工作。

我已經添加了一個清除本地存儲按鈕，它的工作原理。如果你點擊它並刷新頁面，你可以再次添加水果。但只要添加了一個水果並刷新了頁面，就不能向水果籃添加更多項目。

我不知道如何在問題上提出一個名稱，所以很難搜索解決方案（我試過！）。

有人能指出我正確的方向嗎？ :-)

小提琴（我不能在這裏使用的，因爲localStorage的這麼摘錄）： 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在retrvestate後更新。

看更新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); 

    }); 

})();