javascript - 如何存储在未知数量的文本区域中输入的文本？

Question

我认为我的案例比我在 SO 上看到的其他案例要难一些。这里我有一个未知数量的 textarea的，这是通过 jQuery 附加的到网站中的占位符。目标是显示所有 textarea下次用户连接到该网站时，将包含输入的信息。 jQuery 脚本使用以下模板附加元素:

HTML

<div class="note">
    <button onclick="this.parentElement.remove()"><i class="ci-pro ci-trash3"></i></button>
    <textarea></textarea>
</div>

(<i class="ci-pro ci-trash3"></i> 用于显示来自 CloudianIconsPro 的图标)

使用 jQueryUI我做了 .note draggable和 resizeable .

到目前为止，我设法做到了以下几点:

JavaScript 与 jQuery

$(document).ready(function() {
    if (localStorage.getItem("notes.list")) { //check if there is something in the local storage
        $("#notes-container").html(localStorage.getItem("notes.list"));
        // #notes-container is the placeholder
    }
    function cacheNotes() {
        var list = $("#notes-container").html();
        //get the content from the placeholder
        localStorage.setItem("notes.list", list);
        //save to the local storage
        setTimeout(cacheNotes, 2000);
        //repeat the proccess
    }
    setTimeout(cacheNotes, 1000);
});

上面代码的结果如下:

• All div's were in their places (as dragged by the user)
• All div's kept their size (as resized by the user)
• The textarea's were empty

我可以看出文本区域是空的，因为我只“缓存”了占位符内的 HTML 代码。我还认为我无法设置一百个其他本地存储来缓存每个 textarea 中的文本。 .

任何帮助将不胜感激。提前致谢!

Answer 1

您正在保存包含文本区域的整个容器的 HTML。

一来效率不高，二来不行。
当您在 textarea 中键入内容时，HTML 不会更改，value 属性会更改，这就是您要保存的内容。

我注意到您可以选择删除文本区域，因此您还需要做一些事情来存储文本区域的顺序，除非您在重新加载时保持该状态。

像这样

$(document).ready(function() {
  if (localStorage.getItem("notes_list")) {
    var html   = localStorage.getItem("notes_html");
    var result = JSON.parse(localStorage.getItem("notes_list"));

    $("#notes-container").html(html);

    $.each(result, function(_, data) {
      $("#" + data.index).text(data.value);
    });
  } else {
    $("#notes-container textarea").each(function(i) {
      this.id = 'notes_' + i;
    });
  }

  function cacheNotes() {
    var list = $("#notes-container textarea").map(function(_, item) {
      return { index: item.id, value: item.value };
    }).get();

    localStorage.setItem("notes_list", JSON.stringify(list));
    localStorage.setItem("notes_html", $("#notes-container").html());
    setTimeout(cacheNotes, 2000);
  }
  setTimeout(cacheNotes, 1000);
});

FIDDLE