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

我想我的案子比我在这里看到的其他案子要难一些。在这里，我有一个未知数量的

textarea

，它们被添加到网站的占位符中。目标是在用户下次连接到网站时显示包含输入信息的所有

textarea

。jQuery脚本使用以下模板添加元素：

HTML

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

上述代码的结果如下：

• 所有

  div

  都在各自的位置（由用户拖动）
• 所有

  div

  都保持其大小（由用户调整大小）

• 文本区域

  为空

我可以看出文本区域是空的，因为我只“缓存”占位符中的HTML代码。我还认为我不能设置100个其他本地存储来缓存来自每个

textarea

的文本

---

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

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

首先，它不是很有效，其次，它不起作用。
当您在textarea中键入时，HTML不会更改，而value属性会更改，这是您要保存的内容

我注意到您有一个删除textareas的选项，因此您还需要做一些事情来存储textareas的顺序，除非您在重新加载时保持该状态

像这样的

$(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);
});

---

您应该做什么来循环浏览页面中所有可用的

，然后将所需信息保存到一个数组，

字符串化

数组，然后保存到

本地存储

$（文档）.ready（函数（）{
var saveData=function（）{
//循环浏览所有笔记
var Tobeccached=[]；
$（“.note”）。每个（函数（）{
//存储元素索引
var obj={
//获取注释索引
索引：$（this）.index（），
//获取注释名称
名称：$（this.attr（“名称”）
};
//获取其中textarea的值
obj[“value”]=$（this）.find（“textarea”）.map（函数（）{
返回$（this.val（）；
}).get（）[0]//映射返回一个数组；
托贝克推（obj）；
});
//省省吧
setItem（“cachedData”，JSON.stringify（tobecache））；
警报（“数据已保存”）；
};
var loadData=function（）{
var cached=localStorage.getItem（“cachedData”）；
如果（缓存）{
cached=JSON.parse（cached）；
//循环遍历每个缓存的数据
对于（var i=0；i
。注意{
光标：指针；
显示：内联块；
宽度：150px；
高度：自动；
边框：1px纯黑；
边界半径：4px；
填充物：5px；
框大小：边框框；
保证金：5px；
}
。注意：悬停{
边框：1px纯红；
}
文本区{
宽度：90%；
保证金：0；
}

1.
2.
3.
4.
5.
6.
拯救
能否将js fiddle代码作为SO代码片段发布？@MonaLisa抱歉，但是不允许在代码片段上使用
localStorage
。要测试fiddle示例，只需单击“保存”按钮保存数据，只需重新启动代码即可加载。请注意，我的问题代码中有一个删除文本区域的选项。此外，通过另一个函数（addNote），用户可以使用textarea添加更多的容器（.note）。存储它们的值是完美的，但是存储容器又如何呢？也许通过单击“保存”，它还应该保存容器的占位符（“notes container”）。@MonaLisa hello我根据您的输入修改了答案，
删除.note text区域的选项不需要处理，因为我通过每个可用的
创建了
保存
函数。注意
页面中的
，这意味着不包括已删除的
。我更新了答案和小提琴以保存
位置，并根据修改时的位置对其重新定位。这看起来很棒，但有一个问题。我不知道如何将其连接到我的源代码中，因为您编写的代码对我来说很复杂，我还需要添加我在问题中编写的代码部分，该部分代码还将标记存储在占位符中。用更少的词：我需要同时存储标记和文本区域的值。@MonaLisa-我编辑过以尝试做你想做的事情，在那里它存储所有内容，包括值等。不知道为什么，但它似乎不起作用。我不确定我没有包含在问题中的信息是否会改变什么，但这里是：用户正在通过addNote（）函数添加容器“.note”，因此如果用户没有添加任何容器，则可能没有任何容器。
如果这确实改变了问题的工作方式，请告诉我，这样我将更新我的问题。
$(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);
});