Question

我认为我的情况比我在这里看到的另一个更难。在这里，我有一个未知数量的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。

到目前为止我设法做的是以下几点：

使用 jQuery

JavaScript

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

上面代码的结果如下：

所有div都在他们的位置（由用户拖动）

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

textarea是空的

我可以说textareas是空的，因为我＆＃34;缓存＆＃34;仅占位符内的 HTML 代码。我还认为我无法设置一百个其他本地存储来缓存每个textarea的文本。

任何帮助都将受到高度赞赏。提前谢谢！

Answer 1

您正在保存包含textareas的整个容器的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);
});

FIDDLE

Answer 2

您应该如何循环浏览页面中的所有<div .notes>，然后将所需信息保存到数组中，stringify数组然后保存到localStorage。< / p>

$(document).ready(function() {
  var saveData = function() {
    // loop through all notes
    var tobeCached = [];
    $(".note").each(function() {
      // store elements index
      var obj = {
        // get .note index
        index: $(this).index(),
        // get .note name
        name: $(this).attr("name")
      };

      // get the value of the textarea in it
      obj["value"] = $(this).find("textarea").map(function() {
        return $(this).val();
      }).get()[0] // map returns an array;

      tobeCached.push(obj);
    });

    // save it
    localStorage.setItem("cachedData", JSON.stringify(tobeCached));
    alert('data saved');
  };

  var loadData = function() {
    var cached = localStorage.getItem("cachedData");

    if (cached) {
      cached = JSON.parse(cached);

      // loop through each cached data	
      for (var i = 0; i < cached.length; i++) {
        var cachedItem = cached[i];
        // find the note
        var note = $(document).find(".note[name='" + cachedItem.name + "']");

        // just make sure that note was found
        if (note) {
          // find the note that contains name and reorder it
          $(note).insertBefore($(".note").eq((cached[i].index) + 1));
          // then find a textarea and change its value
          $(note).find("textarea").val(cached[i].value);
        }
      }
    }
  };

  $("#save").click(function() {
    saveData();
  });

  // make .items sotable
  $(".items").sortable();

  // call load data by default
  loadData();
});

.note {
  cursor: pointer;
  display: inline-block;
  width: 150px;
  height: auto;
  border: 1px solid black;
  border-radius: 4px;
  padding: 5px;
  box-sizing: border-box;
  margin: 5px;
}

.note:hover {
  
  border: 1px solid red;
}

textarea {
   width: 90%;
   margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items">
   <div class="note" name="note-1">
   1
      <textarea></textarea>
   </div>
   <div class="note" name="note-2">
   2
      <textarea></textarea>
   </div>
   <div class="note" name="note-3">
   3
      <textarea></textarea>
   </div>
   <div class="note" name="note-4">
   4
      <textarea></textarea>
   </div>
   <div class="note" name="note-5">
   5
      <textarea></textarea>
   </div>
   <div class="note" name="note-6">
   6
      <textarea></textarea>
   </div>
</div>
<button id="save">
save
</button>

here is a working example

希望有所帮助

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

2 个答案: