javascript - 您可以将多个单独的列表保存到 localStorage 吗？

Question

我正在开发一个项目，该项目将接受用户输入并将其存储到 localStorage 的列表中。我希望能够在页面上列出其中三个待办事项列表。

我已将代码放入三个单独的列中，但是当我尝试在其中提交信息时，它似乎将所有列中的值添加到一个列表中。我并不是每次都使用 JS 或 Jquery，所以我一直在努力学习，但我被难住了。这是我希望在三个单独的列中运行的代码。

如何确保列表存储在三个不同的位置并单独存储在 localStorage 中？

       var list = JSON.parse(localStorage.getItem("todolist"));
// Checks for to dos in LS, if none starts with empty array
if (!Array.isArray(list)) {
  list = [];
}
function putOnPage() {
  $("#todo-list").empty(); // empties out the html
  var insideList = JSON.parse(localStorage.getItem("todolist"));
  if (!Array.isArray(insideList)) {
    insideList = [];
  }
  // todos to page
  for (var i = 0; i < insideList.length; i++) {
    var p = $("<p>").text(insideList[i]);
    var b = $("<button class='delete'>").text("x").attr("data-index", i);
    p.prepend(b);
    $("#todo-list").prepend(p);
  }
}
// rtodos on page load
putOnPage();
$(document).on("click", "button.delete", function() {
  var todolist = JSON.parse(localStorage.getItem("todolist"));
  var currentIndex = $(this).attr("data-index");
  // deletes items
  todolist.splice(currentIndex, 1);
  list = todolist;
  localStorage.setItem("todolist", JSON.stringify(todolist));
  putOnPage();
});
$("input[type='submit']").on("click", function(event) {
  event.preventDefault();
  // changes input to variable and clears input field
  var val = $("input[type='text']").val();
  $("input[type='text']").val("");
  // adds to do to list and local storage
  list.push(val);
  localStorage.setItem("todolist", JSON.stringify(list));
  putOnPage();
});

Answer 1

您可能可以将列表设置为一个包含三个对象的数组，每个对象包含页面中的一个单独的列，而不是使用列表一的 list[0] 进行更新或设置， list[1] 表示列表 2，依此类推。

或者

您可以通过在本地存储中为每一列使用三个存储来实现此目的。

JS fiddle 示例 -> https://jsfiddle.net/jassMarok/3gcnyamp/18/

// find elements
var banner = $("#banner-message")
var button = $("button")
var testObject = [{
    name: "todo-list1",
    items: ["Sell", "Buy", "Donate"]
  },
  {
    name: "todo-list2",
    items: ["Go", "Run", "Sleep"]
  },
  {
    name: "todo-list3",
    items: ["Work", "Program", "Code"]
  }
];
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// handle click and add class
button.on("click", function() {

  var lists = $('[id|="list"]');
  console.log(lists);
  var retrievedObject = JSON.parse(localStorage.getItem('testObject'));
  console.log(retrievedObject)

  for (i = 0; i < lists.length; i++) {
    var $list = lists[i];
    var items = retrievedObject[i].items;
    for (j = 0; j < items.length; j++) {
      console.log(items);
      $($list).append('<li><a href="#">' + items[j] + '</a></li>');
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <button>Load Data</button>
  <hr/>
  <h3>
    List 1
  </h3>
  <ul id="list-1"></ul>
  <hr/>
  <h3>
    List 2
  </h3>
  <ul id="list-2"></ul>
  <hr/>
  <h3>
    List 3
  </h3>
  <ul id="list-3"></ul>
</div>