title: contentEditable doesn't work with localStorage after page refresh
body: <p>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. </p>
  
  <p>When you double click on the item that you just appended, you can edit it (contentEditiable), <strong>but when you refresh the page, the localStorage retrieves the original name instead of the modified one.</strong></p>
  
  <p>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. </p>
  
  <p>I've tried adding storestate() numerous places, and tried to move around my functions, suspecting that my code is written in the wrong order.</p>
  
  <p>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!</p>
  
  <p>I can't find a single similar example on SO, can someone point me in the right direction? :)</p>
  
  <pre><code>(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;
  
  })();
  </code></pre>
  
  <p>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: 
  <a href="https://jsfiddle.net/bx39gd0n/10/" rel="nofollow noreferrer">https://jsfiddle.net/bx39gd0n/10/</a></p>