将列表存储在本地存储中

mnaputi 发表于 Dev

纳普蒂

我正在尝试创建一个页面，该页面上每个无序列表中的项目都存储在本地存储中。到目前为止，我只能存储一个列表。

我的问题是我不知道如何存储多个元素ID。

这是我正在使用的代码，其中'm1s1w1'是无序列表的ID。

$(document).ready(function() {
    var list = document.getElementById('m1s1w1');
    $("#saveAll").click(function(e) {
        e.preventDefault();
        localStorage.setItem('todoList', list.innerHTML);
    });
    $("#clearAll").click(function(e) {
        e.preventDefault();
        localStorage.clear();
        location.reload();
    });

    loadToDo();

    function loadToDo() {
      if (localStorage.getItem('todoList')){
        list.innerHTML = localStorage.getItem('todoList'); 
    }
    }

});

要温柔。我搜索了几个小时，但我仍然很陌生。

编辑：这是HTML。有很多列表：“ m1s1w1”，“ m1s1w2”等。为简洁起见，我删除了一些列表项。

<div id="tabs">
<ul>
    <li><a href="#tabs1">M1</a></li>
    <li><a href="#tabs2">M2</a></li>
    <li><a href="#tabs3">M3</a></li>
    <li><a href="#tabs4">M4</a></li>
    <li><a href="#tabs5">M5</a></li>
    <li><a href="#tabs6">M6</a></li>
</ul>
<div id="tabs1">
    <div id="m1semester1" class="accordion">
        <h3>Semester 1</h3>
            <div>
                <ul id="m1s1w1" class="sortable">
                    <p>Week 1</p>
                    <li class="ui-state-default">
                        <span class="ui-icon ui-icon-arrow-4"></span>
                        <span class="ce">Item 1</span>
                    </li>
                </ul>
                <ul id="m1s1w2" class="sortable">
                    <p>Week 2</p>
                    <li class="ui-state-default">
                        <span class="ui-icon ui-icon-arrow-4"></span>
                        <span class="ce">Item 1</span>
                    </li>
                </ul>
            </div>
    </div>
    <div id="m1semester2" class="accordion">
        <h3>Semester 2</h3>
            <div>
                <ul id="m1s2w1" class="sortable">
                    <p>Week 1</p>
                    <li class="ui-state-default">
                        <span class="ui-icon ui-icon-arrow-4"></span>
                        <span class="ce">Item 1</span>
                    </li>
                </ul>
                <ul id="m1s2w2" class="sortable">
                    <p>Week 2</p>
                    <li class="ui-state-default">
                        <span class="ui-icon ui-icon-arrow-4"></span>
                        <span class="ce">Item 1</span>
                    </li>

                </ul>
            </div>
    </div>
    <p>
        <button id="saveAll">Save All</button> |
        <button id="clearAll">Clear All</button>
    </p>
</div>

如果我正确理解，则可以遍历列表并将其内容另存为数组：

$(document).ready(function() {

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