如何在localStorage中保存HTMLElement(表)?

时间:2013-10-29 10:47:01

标签: javascript html arrays

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

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

现在我想将表保存在localStorage中,所以我可以再次加载它。 (覆盖现有表格)。

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

问题是Array" projects"拥有(一次保存)2000+元素。但我想要的是将整个表保存到第一个(或后来附加)索引。

最后,我希望在Option元素上列出不同的Save:

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

    } 
}

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

2 个答案:

答案 0 :(得分:0)

您可以通过jquery轻松完成此操作,您是否对此感兴趣,如果是,请尝试按照代码

用于设置值

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

获取数据

$.jStorage.get("projects");

用键

删除数据
$.jStorage.deleteKey("projects");

答案 1 :(得分:0)

我选择继续使用本地存储,但不是使用数组我只是让用户为每个项目命名并为每个存储创建一个新项目:

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