Javascript 如何在localStorage中保存HTMLElement（表）？

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

我有一个项目，其中tablerows被添加到表中。很好

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

问题是数组“projects”在保存一次后有2000多个元素。但我只想将整个表保存到第一个（或以后追加）索引中

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

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

    } 
}

函数loadSaveStates（）{
警报（'正在加载保存的状态…'）；
var projects=localStorage.getItem（'projects'）；
select=document.getElementById（'selectSave'）；//我的下拉列表
var length=projects.length，
元素=空；
控制台日志（长度）；
对于（变量i=0；i

---

有人能告诉我我做错了什么吗？

你可以通过

jquery

轻松做到这一点，如果有，你对此感兴趣吗。。然后尝试下面的代码

用于设置值

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

用于获取数据

$.jStorage.get("projects");

用于删除带有密钥的数据

$.jStorage.deleteKey("projects");

---

我支持使用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();
}

---

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

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