CODEWITHSUNDEEP
htmljquerylisthtml-lists
mnaputi
mnaputi

Reputation: 51

Storing lists in localstorage

I am trying to create a page where the items in each unordered list on the page are stored in local storage. So far I've only been able to get one list stored.

My problem is that I can't figure out how to store more than one element ID.

Here's the code that I'm using, with 'm1s1w1' being the id of an unordered list.

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

});

Be gentle. I searched for hours and I'm still fairly new to this.

EDIT: Here is the HTML. There are many lists: 'm1s1w1', 'm1s1w2', etc. I removed some of the list items for brevity.

<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>

Upvotes: 2

Views: 4131

Answers (1)

T J
T J

Reputation: 43156

If i understood correctly, you can loop through the lists and save their content as an array:

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

Upvotes: 4

Related Questions