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

Question

So I have multiple input boxes in HTML. Then I create a table with jquery and on a click of a button I store values from the input boxes into my table. What I don't know how to do is how to store those values into local storage and the when the page reloads show them in the table.

This is my code for adding a new line to the table:

    $().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

Use setItem method of localStorage :

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

Later you can fetch it like this:

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

Answer 2

You have to make a array

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

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

You have to store it in

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

Generate <table> from this JSON stored in localStorage

Answer 3

to set a item in browser local storage:

localStorage.setItem("key", value);

to get a item from browser local storage:

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