page refresh後にcontentEditableがlocalStorageで機能しない

Question

addFruitボタンをクリックすると、入力テキスト値が必要に応じてfruitListに追加されます。 localStorageは同時にアクティブになり、動作しますが、データはページの更新後もそこに残ります。

追加したアイテムをダブルクリックすると編集できます（contentEditiable）ですが、ページを更新すると、localStorageは変更されたものではなく元の名前を取得します。

更新の問題だと思います。リストアイテムをダブルクリックすると、編集が終わったら直ちにstorestate関数が呼び出され、以前にlocalStorageに追加されたものが上書きされます。

私はstorestate（）を数多く追加しようとしましたが、私のコードが間違った順序で書かれていると思われる機能を回避しようとしました。

実際にはページの更新後に実際に機能することがありますが、通常は複数のアイテムを追加してから編集します。しかしいつもではない。ややこしい！

私は同じような例を見つけることができません。誰かが正しい方向に向いていますか？ :)

コードスニペット全体を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); 
})(); 

あなたは単にkeyUpイベントで呼び出されるイベントリスナーをチェーンます。フィディングでは、単にコンソールに「変更された」ログを記録します。 localStorageのリストを置き換えるためにあなた自身のコードで置き換えるだけで大​​丈夫です！