将表格内容存储到HTML5本地存储中

Question

因此，我在HTML中有多个输入框。 然后，我使用jquery创建一个表，然后单击按钮，将输入框中的值存储到表中。 我不知道该怎么做是如何将这些值存储到本地存储中，以及何时页面重新加载在表中显示它们。

这是我在表中添加新行的代码：

    $().ready(function(){
      $("#addLine").click(function(){
        var chore = $("#chore").val();
        var type= $("#type").val();
        var importance = $("#importance").val();
        counter++;
        var newLine = "<tr><td>"+counter+"</td><td>"+chore+"</td>   
        <td>"+type+"</td><td>"+importance+"</td><td>"+date+"</td></tr>";
        $("#tabela tbody").append(newLine);
});
});

Answer 1

使用localStorage的 setItem方法：

localStorage.setItem( "tabledata", $("#tabela").html() );

稍后您可以像这样获取它：

var tabledata  = localStorage.getItem( "tabledata" );
$("#tabela").html( tabledata ); 

Answer 2

你必须做一个数组

var tableItems = [];
//getting old items
tableItems = localStorage.getItem("tabledata");

//push item on new add
tableItems.push({
"chore":"",
"type":"",
"importance":"",
"date":""
});

您必须将其存储在

localStorage.setItem( "tabledata", tableItems ) );

从存储在localStorage JSON生成<table>

Answer 3

在浏览器本地存储中设置项目：

localStorage.setItem("key", value);

从浏览器本地存储中获取项目：

var value = localStorage.getItem("key");