JS函数检索本地存储数据并放置在HTML表中

我正在尝试实现这个 boostrap 数据表：https://datatables.net/examples/api/add_row.html

。但我想在表单而不是预设数据中添加用户提供的数据。我将表单数据存储在本地存储中。

我知道我需要字符串化和解析数据。我添加了一些伪代码，以及一些关于我认为需要做的事情的评论，但我被卡住了。

JSfiddle：http://jsfiddle.net/wad11656/bkoze96c/8/

.HTML：

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Entry Date</th>
            <th>Feedback</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Entry Date</th>
            <th>Feedback</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>2011/04/25</td>
            <td>Different color scheme</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>2011/07/25</td>
            <td>Change the menu</td>
        </tr>
        <tr>
            <td>Bob Parker</td>
            <td>2014/04/23</td>
            <td>Get more sleep--you look awful!</td>
        </tr>
        <tr>
            <td>Wendy-Sue</td>
            <td>2014/04/27</td>
            <td>Call me more often</td>
        </tr>
    </tbody>
</table>
<!-- Form -->
<form method="post" action="">
    <input name="name" id="name" type="text" class="stored" placeholder="Name" autofocus="" required="">
    <br>
    <textarea name="feedback" id="feedback" class="stored" placeholder="Endorsement" rows="3" required=""></textarea>
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <button type="button" class="btn btn-primary" id="submit_button" onclick="append_feedback();">Submit</button>
</form>

贾夫文：

// Ready Table:
$(document).ready(function () {
    var t = $('#example').DataTable();
    var counter = 1;
});
// Store data in local storage:
$(document).ready(function () {
    function init() {
        if (localStorage["name"]) {
            $('#name').val(localStorage["name"]);
        }
        if (localStorage["feedback"]) {
            $('#feedback').val(localStorage["feedback"]);
        }
    }
    init();
});
$('.stored').keyup(function () {
    localStorage[$(this).attr('name')] = $(this).val();
});
$('#localStorageTest').submit(function () {
    localStorage.clear();
});
//Rough draft of Functions for adding row from localStorage data:
/*
var jsonarray = [];
var name;
var feedback;
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
var today = month + "/" + day + "/" + year;
var message;
document.getElementById("submit_button").addEventListener("click", submit);
function submit() {
    var t = $('#example').DataTable();
    t.clear();
    // Clear out table with .clear() see api doc
    // Grab JSON array
    // parse JSON array form local storage to jsonArray
    jsonarray = JSON.parse(localStorage.getItem("storage"));
    // for each (var message in jsonArray)
    //look for how to loop through JSON array in js
    endorsements.forEach(var (message)
    t.row.add([
        message[name],
        message[date],
        message[feedback], ]).draw();
    });
}
function localsave() {
    localStorage.Name = document.getElementById("name").value;
    localStorage.Words = document.getElementById("feedback").value;
    // Put name and message into key value pair for JSON
 [{"name":"namethatwasinputeed","date":"1/28/2015","feedback":"messagethatwasinputedfromlocalstorage", },
    {"name":"namethatwasinputeed","date":"1/28/2015","feedback":"messagethatwasinputedfromlocalstorage", },
    {"name":"namethatwasinputeed","date":"1/28/2015","feedback":"messagethatwasinputedfromlocalstorage", }]
    //Stringify to turn into JSON string array
    localStorage["storage"] = JSON.stringify(message);
}
*/