Javascript 能否将多个单独的列表保存到localStorage？

我正在进行一个项目，该项目将接受用户输入并将其存储到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();
});

var list=JSON.parse（localStorage.getItem（“todolist”）；
//如果没有以空数组开头的待办事项，则检查LS中的待办事项
如果（！Array.isArray（列表））{
列表=[]；
}
函数putOnPage（）{
$（“#待办事项列表”）.empty（）；//清空html
var insideList=JSON.parse（localStorage.getItem（“todolist”）；
if（！Array.isArray（insideList））{
内部列表=[]；
}
//待办事项至第页
对于（变量i=0；i

---

您可以将列表设置为一个包含三个对象的数组，每个对象包含页面中的一个单独列，而不是使用

list[0]

对列表一进行更新或设置，

list[1]

对列表二进行更新或设置，依此类推

或

您可以在localstorage中使用三个存储来实现这一点，每个列对应一个存储

JS小提琴示例->

//查找元素
var banner=$（“#banner消息”）
变量按钮=$（“按钮”）
var testObject=[{
名称：“todo-list1”，
物品：[“出售”、“购买”、“捐赠”]
},
{
名称：“todo-list2”，
项目：[“开始”、“跑步”、“睡眠”]
},
{
名称：“todo-list3”，
项目：[“工作”、“计划”、“代码”]
}
];
//将该对象放入存储器
setItem（'testObject'，JSON.stringify（testObject））；
//句柄单击并添加类
按钮。打开（“单击”，函数（）{
变量列表=$（“[id |=”列表]”）；
控制台日志（列表）；
var retrievedObject=JSON.parse（localStorage.getItem（'testObject'）；
console.log（retrievedObject）
对于（i=0；i”）；
}
}
})

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#横幅信息{
背景：#fff；
边界半径：4px；
填充：20px；
字体大小：25px；
文本对齐：居中；
过渡：均为0.2s；
保证金：0自动；
宽度：300px；
}
钮扣{
背景：#0084ff；
边界：无；
边界半径：5px；
填充：8px 14px；
字体大小：15px；
颜色：#fff；
}
#banner-message.alt{
背景：#0084ff；
颜色：#fff；
边缘顶端：40px；
宽度：200px；
}
#banner-message.alt按钮{
背景：#fff；
颜色：#000；
}

你好，世界

加载数据

清单1


清单2


清单3

对本地存储使用不同的键；对元素使用不同的ID。请不要链接到回答问题的代码。在答案中张贴代码。请注意，在堆栈溢出问题上，您可以使用提供一个类似于JSFIDLE的可运行示例。@HereticMonkey堆栈片段不允许我使用localstorage API。有办法吗？也许没有（忘记了沙盒属性），但是，您仍然可以在普通代码块中复制此处的代码。@HereticMonkey完成，谢谢你让我意识到这个功能，我现在要经常使用它：）