javascript - 页面刷新后，contentEditable 无法与 localStorage 一起使用

Question

当您单击 addFruit 按钮时，输入文本值将按其应有的方式附加到 FruitList 中。 localStorage同时被激活，并且有效，页面刷新后数据还在。

当您双击刚刚附加的项目时，您可以对其进行编辑(contentEditiable)，但是当您刷新页面时，localStorage 会检索原始名称而不是修改后的名称。

我认为这是一个更新问题。当您双击列表项时，它应该在完成编辑后立即调用 storestate 函数，因此它会覆盖之前添加到 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);
})();

您只需链接一个事件监听器即可在 keyup 上调用。在 fiddle 中，它只是将“更改”记录到控制台。只需将其替换为您自己的代码，以替换 localStorage 中的列表，就可以了!