Question

我是一名教师并创建了一个页面来组织我的课程计划。应该有能力添加新课程（li）和新周（ul）。课程可在每周之间进行分类。然后，每个新添加的项目将保存到localStorage。

到目前为止，我能够创造课程和新的一周。可排序功能有效。保存功能有效...除了它不会保存任何新周（ul）。当我刷新时，新课程（li）仍在页面上，但新周（ul）已经消失。

  $("#saveAll").click(function(e) {
    e.preventDefault();
    var listContents = [];
    $("ul").each(function(){
       listContents.push(this.innerHTML);
    })
    localStorage.setItem('todoList', JSON.stringify(listContents));
  });

  $("#clearAll").click(function(e) {
    e.preventDefault();
    localStorage.clear();
    location.reload();
  });

  loadToDo();

  function loadToDo() {
    if (localStorage.getItem('todoList')){
        var listContents = JSON.parse(localStorage.getItem('todoList'));
        $("ul").each(function(i){
          this.innerHTML = listContents [i];
        })
    }
  }

我创建了一个fiddle here。

您可以点击“添加新周”按钮，然后点击“创建课程”按钮，将新课程拖到其中一周。单击“全部保存”后，仅保存第一周。

我似乎无法弄清楚缺少什么。

Answer 1

正确保存，但由于该网页最初只有一个<ul>元素，因此这是唯一一个填充在loadToDo()中的元素。（listContents有多个元素，但$("ul").each(...)只迭代一个元素。）

您可以使用快速创可以解决此问题。将您的#new-week-but点击处理程序重构为命名函数：

function addNewWeek() {
    var x = '<ul class="sortable weeklist"></ul>';
    $(x).appendTo('.term').sortable({connectWith: '.sortable'});
}

$('#new-week-but').click(addNewWeek);

然后在从存储中获取数组之后但在枚举<ul>元素之前添加此块：

var i;
for (i = 2; i < listContents.length; ++i) {
    addNewWeek();
}

这将在尝试填充之前添加所需数量的<ul>元素。

我选择将i初始化为2，因为这比listContents中的元素数量少两个。我们需要减去一个，因为页面加载时<ul>中有.term，而另一个因为<ul id="new-lesson-list">内容也会保存在listContents中。（考虑在#saveAll点击处理程序中过滤掉该元素。）

（请注意，这需要将所有$(document).ready()函数合并到一个大函数中，以便addNewWeek()对其余代码可见。）

提高代码可维护性的建议：

为每个可编辑的<ul>提供一个CSS类，以便可以将它们与页面上的其他随机<ul>元素区分开来。保存数据时过滤此类，以便“模板”<ul>也不会被保存。
从页面中删除一个默认的可编辑<ul>。相反，在loadToDo()功能中，将else块添加到if块，然后从addNewWeek()块中调用else。另外，如果listContents.length == 0，请将其调用。这样可以防止重复HTML源代码中的元素（复制很糟糕！），并且必须在加载逻辑中对其进行说明。

如果你实现了这两个，那么你可以在我的示例代码中将i初始化为0而不是2，这样看起来不那么奇怪（并且不太可能绊倒未来的维护者）。

将附加元素存储到localStorage

1 个答案: