contentEditable doesn't work with localStorage after page refresh

Question

When you click the addFruit button, the input text value gets appended to the fruitList as it should. localStorage is activated at the same time, and it works, the data is still there after page refresh.

When you double click on the item that you just appended, you can edit it (contentEditiable), but when you refresh the page, the localStorage retrieves the original name instead of the modified one.

I think it's an an updating issue. When you double click on a list item, it should call the storestate function as soon as you're done editing, so it overwrites what was previously added to localStorage.

I've tried adding storestate() numerous places, and tried to move around my functions, suspecting that my code is written in the wrong order.

Sometimes it actually works after page refresh, but it's usually if I add several items, and then edit one of them. But not always. It's confusing!

I can't find a single similar example on SO, can someone point me in the right direction? :)

(function() {

  var fruitList = document.querySelector('#fruitList');
  var fruitInput = document.querySelector('.fruitInput');
  var addFruitButton = document.querySelector('.addFruitButton');
  var removeFruits = document.querySelector('.removeFruits');
  // Add fruits

  // Store fruits
  function storestate() {
    localStorage.fruitList = fruitList.innerHTML;
  };
  // Retrieve stored fruits from localStorage
  function retrievestate() {

    if (localStorage.fruitList) {
      fruitList.innerHTML = localStorage.fruitList;
    }
  }
  retrievestate();

  // Remove fruit storage
  function removeStorage() {
    localStorage.clear(fruitList);
    fruitList.innerHTML = ''; // removes HTML
  }

  function addFruit() {
    if (fruitInput.value) {

      var li = document.createElement('li');
      li.className = 'fruit-item';
      li.innerHTML = fruitInput.value;
      li.contentEditable = 'true';
      fruitList.append(li);
      fruitInput.value = ''; // Reset input field
    }
    storestate();

  }

  // Clear all fruits
  removeFruits.onclick = removeStorage;

  //Add fruit
  addFruitButton.onclick = addFruit;

})();

I tried to embed the entire code-snippet on SO, but I get an error because of localStorage. Works fine on jsFiddle and other editors: https://jsfiddle.net/bx39gd0n/10/

Answer 1

https://jsfiddle.net/xbrra7yt/1/

    (function() {

  ...
  //change state of item
  function changestate() {
    console.log('changed');
  }
  ...
  fruitList.addEventListener('keyup', changestate);
})();

You would simply chain an eventlistener to be called on keyup. In the fiddle it simply logs 'changed' to the console. Just replace that with your own code to replace the list in localStorage and you should be fine!