Question

单击addFruit按钮时，输入文本值将按原样附加到fruitList。 localStorage同时被激活，并且工作正常，页面刷新后数据仍然存在。

当您双击刚刚追加的项目时，可以编辑它（contentEditiable），但刷新页面时，localStorage会检索原始名称而不是修改后的名称。 < / p>

我认为这是一个更新问题。当您双击列表项时，它应该在您完成编辑后立即调用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上调用的eventlistener。在小提琴中它只是记录并改变了＃39;到控制台。只需用你自己的代码替换它来替换localStorage中的列表，你应该没问题！

页面刷新后，contentEditable不能与localStorage一起使用

1 个答案: