How to save a HTMLElement (Table) in localStorage?

Posted by Hagbart Celine on Stack Overflow See other posts from Stack Overflow or by Hagbart Celine
Published on 2013-10-29T10:47:00Z Indexed on 2013/10/30 9:54 UTC
Read the original article Hit count: 268

Filed under:

JavaScript

|

html

|

arrays

I've been trying this for a while now and could not find anything online...

I have a project, where tablerows get added to a table. Works fine.

Now I want to save the Table in the localStorage, so I can load it again. (overwrite the existing table).

 function saveProject(){
                //TODO: Implement Save functionality
            var projects = [];
            projects.push($('#tubes table')[0].innerHTML);
            localStorage.setItem('projects', projects);
          //console.log(localStorage.getItem('projects'));

The problem is the Array "projects" has (after one save) 2000+ elements. But all I want is the whole table to be saved to the first (or appending later) index.

In the end I want the different Saves to be listed on a Option element:

    function loadSaveStates(){
     alert('loading saved states...');
     var projects = localStorage.getItem('projects');
     select = document.getElementById('selectSave'); //my Dropdown
     var length = projects.length,
         element = null;
     console.log(length);

     for (var i = 0; i < length; i++) {

        element = projects[i];
        var opt = document.createElement('option');
        opt.value = i;
        opt.innerHTML = 'project ' + i;
        select.appendChild(opt);

    } 
}

Can anyone tell me what I am doing wrong?

Developer IT