contentEditable не работает с localStorage после обновления страницы

Question

Когда вы нажимаете кнопку addFruit, значение входного текста добавляется к списку фруктов, как следует. localStorage активируется одновременно, и он работает, данные все еще присутствуют после обновления страницы.

Если вы дважды щелкните элемент, который вы только что добавили, вы можете отредактировать его (contentEditiable), , но при обновлении страницы localStorage извлекает исходное имя вместо измененного.

Я думаю, что это проблема обновления. Когда вы дважды щелкаете по элементу списка, он должен вызывать функцию сохранения, как только вы закончите редактирование, поэтому перезаписывает то, что ранее было добавлено в localStorage.

Я попытался добавить storestate() в многочисленные места и попытался обойти мои функции, подозревая, что мой код написан в неправильном порядке.

Иногда он действительно работает после обновления страницы, но обычно я добавляю несколько элементов, а затем редактирую один из них. Но не всегда. Это сбивает с толку!

Я не могу найти ни одного подобного примера на SO, может ли кто-нибудь указать мне в правильном направлении? :)

(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; 

})(); 

Я пытался вставлять весь код-фрагмент на SO, но я получаю сообщение об ошибке из-за LocalStorage. Прекрасно работает на jsFiddle и других редакторов: 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); 
})(); 

Вы бы просто цепь в EventListener называться на KeyUp. В скрипке он просто записывает «изменен» на консоль. Просто замените это на свой собственный код, чтобы заменить список в localStorage, и все должно быть в порядке!