Question

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

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

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

的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>

Javscript：

// 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);
}
*/

Answer 1

LocalStorage拥有自己的API。如果你不使用它，你可能会得到意想不到的结果

基本上，你需要做这样的事情。

if(window.localStorage) { // not all browsers have it
  var output;
  localStorage.setItem('test', 'value');
  output = localStorage.getItem('test');
  console.log(output); // value
}

您还可以签出一个名为Kizzy的库，它可以很好地执行localStorage

对于您的问题，您应该尝试将所有内容与所有其他注释代码一起放入document.ready中，否则jQuery将无法正常运行

// Ready Table:
$(document).ready(function () {
    var t = $('#example').DataTable();
    var counter = 1;

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

JS函数检索本地存储数据＆amp;放在HTML表格中

1 个答案: