如何在 localStorage 中保存 HTMLElement（表格）？答案

【问题标题】：How to save a HTMLElement (Table) in localStorage?如何在 localStorage 中保存 HTMLElement（表格）？
【发布时间】：2013-10-30 17:50:35
【问题描述】：

我已经尝试了一段时间了，但在网上找不到任何东西......

我有一个项目，其中 tablerows 被添加到表中。工作正常。

现在我想将表格保存在 localStorage 中，以便再次加载它。（覆盖现有表）。

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

问题是数组“项目”有（一次保存后）2000 多个元素。但我想要的只是将整个表保存到第一个（或稍后附加的）索引。

最后，我希望在 Option 元素上列出不同的保存：

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

    } 
}

谁能告诉我我做错了什么？

【问题讨论】：

标签： javascript html arrays

【解决方案1】：

您可以通过jquery 轻松做到这一点，您对此感兴趣吗，如果是的话.. 然后尝试以下代码

用于设置值

$.jStorage.set("projects", $.trim(projects));

获取数据

$.jStorage.get("projects");

用key删除数据

$.jStorage.deleteKey("projects");

【讨论】：

问题是我希望能够存储多个项目。这就是我尝试使用数组的原因。
所以首先制作一个项目数组，然后将该数组保存在存储中。

【解决方案2】：

我选择继续使用 localStorage，但不喜欢使用数组，我只是让用户为每个项目命名并为每个保存创建一个新项目：

    function saveProject(){
   //TODO: Implement Save functionality
            var pname=prompt("Please enter your project name:","projectname")
            var text = $('#mainTable')[0].innerHTML;
            //console.log(text);
            localStorage.setItem(pname, text);
            //console.log(localStorage.key(2));
            loadSaveStates();
        }

function loadProject(){
    var selected = $('#selectSave')[0].selectedIndex
    //console.log(selected);
    if (localStorage.key(selected) == 'jStorage'){
            selected++;
    }
        var innerHTMLTable = localStorage[localStorage.key(selected)];
        //console.log(innerHTMLTable);
        $('#mainTable')[0].innerHTML = innerHTMLTable;

    updateHandlers();
}

function deleteProject(){
    var selected = $('#selectSave')[0].selectedIndex
    var pname = $('#selectSave')[0].options[selected].value

    $('#selectSave')[0].remove(selected);
    localStorage.removeItem(pname);

    //console.log(pname);
    loadSaveStates();
}

【讨论】：