如何永久保存表内容

提问者：小点点

如何永久保存表内容

我是javascript的绝对初学者。我试图制作一个表格，可以保存我在其中键入的内容。我只是得到了与我想要的完全相反的结果，每次我刷新网站时，表都会删除内容。

基本上，我的问题是我必须改变什么，这样我才能永久保存数据，并且不会在每次刷新网页时消失。我也很高兴知道我做错了什么。我已经试着改变了一些事情，但事情变得更糟了

下面是一些示例代码：

JS:

    $(document).ready(function () {
    var counter = 0;

    $("#addrow").on("click", function () {
        var newRow = $("<tr>");
        var cols = "";

        cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';

        cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
        newRow.append(cols);
        $("table.order-list").append(newRow);
        counter++;
    });



    $("table.order-list").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();       
        counter -= 1
    });


});



function calculateRow(row) {
    var price = +row.find('input[name^="price"]').val();

}

function calculateGrandTotal() {
    var grandTotal = 0;
    $("table.order-list").find('input[name^="price"]').each(function () {
        grandTotal += +$(this).val();
    });
    $("#grandtotal").text(grandTotal.toFixed(2));
}

基本HTML：

<div class="container">
<table id="myTable" class=" table order-list">
<thead>
    <tr>
        <td>name</td>
        <td>mail</td>
        <td>phone</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="col-sm-4">
            <input type="text" name="name" class="form-control" />
        </td>
        <td class="col-sm-4">
            <input type="mail" name="mail"  class="form-control"/>
        </td>
        <td class="col-sm-3">
            <input type="text" name="phone"  class="form-control"/>
        </td>
        <td class="col-sm-2"><a class="deleteRow"></a>

        </td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td colspan="5" style="text-align: left;">
            <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
        </td>
    </tr>
    <tr>
    </tr>
</tfoot>

共1个答案

匿名用户

您可以使用localstore对象，该对象存储没有过期日期的数据。当您刷新页面甚至关闭浏览器时，这些数据不会被删除。为了做到这一点，您首先需要创建一个函数，该函数将数据保存到localstore中。

function save_data(){
    let table_data = []
    $('.form-control').each(function() { table_data.push( $(this).val() )});
    localStorage.setItem('table_data', JSON.stringify(table_data));
}

此函数遍历所有表格单元格，并将其内容保存到table\u data数组中。然后使用JSON将table_数据数组转换为String。stringify并保存在localStorage中。每次添加、删除或编辑其中一行时都应执行此函数。为此，我们需要创建新的事件处理程序：

$('tbody').on("DOMSubtreeModified", function() {save_data()});
$('tbody').on('change', '.form-control', function() {save_data()});

第一个函数在每次创建或删除行时触发save_data函数。第二种方法在修改表内容时保存数据。

我们还需要一个从localStorage加载数据的函数：

function load_data(){
    let table_data = JSON.parse(localStorage.getItem('table_data'));
    for (i = 1; i < table_data.length/3; i++) $("#addrow").click()
    $('.form-control').each(function(index) {$(this).val(table_data[index])});
}

此函数使用getItem函数从localStorage加载数据。加载的数据是一个字符串，因此使用JSON将其转换为数组。解析。接下来，根据table_data数组的大小插入新行。最后，它遍历所有表单元格并用加载的数据填充它们。只有在加载页面后，并且只有在localStorage中存在数据时，才应执行此功能。最好的方法是将此行放在ready函数的底部：

if (localStorage.getItem("table_data") != null) load_data()