Question

这里我的要求是提交数据将以表格格式显示，并且在五次提交后，记录将保存在数据库中。

如何在本地保存记录以及如何在jquery或javascript中以表格格式显示。

我的HMTL：

<table id="example" class="display" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Message</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

<form id="localStorageTest" method="post" action="">
    <label>Name:</label>
    <input type="text" name="name" id="name" class="stored" value="" />

    <label>Email:</label>
    <input type="email" name="email" id="email" class="stored" value="" />

    <label>Message:</label>
    <textarea name="message" id="message" class="stored"></textarea>

    <button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;" id="savebutton"><i class="icon-check-sign" aria-hidden="false"></i> Save </button>
</form>

Jquery代码：我正在尝试deatils

$("button#savebutton").click(function(){
                                var name=$("#name").val();
                                var email=$("#email").val();
                                var message=$("#message").val();    
                           var new_row = "<tr><td>" + name + "</td><td>" + email + "</td><td>" + message + "</td></tr>";
                                    $("table tbody").append(new_row);
                                    return false;
 });

Answer 1

本地存储仅限于处理字符串键/值对，您可以使用JSON.stringify并在获取值JSON.parse时执行以下操作

var testObject = { {name:"test", email:"xyz@xyz.com", message:"Hello"} };

//将对象存入存储

localStorage.setItem('testObject', JSON.stringify(testObject));

使用jquery ajax方法将此对象传递给数据并保存，找到有关jQuery的一些文档ajax here

Answer 2

好的，试试这个;

<form id="localStorageTest" method="post" action="">
    <label>Name:</label>
    <input type="text" name="name" id="name" class="stored" value="" />

    <label>Email:</label>
    <input type="email" name="email" id="email" class="stored" value="" />

    <label>Message:</label>
    <textarea name="message" id="message" class="stored"></textarea>

    <input type="submit" class="demo-button" value="Submit" />
</form>

<script>
    $("form").submit(function(e)
    {
        //prevent default form submit
        e.preventDefault();

        //make a blank js object
        var data = {};

        //convert form data to json object
        $("form").serializeArray().map(function(x){data[x.name] = x.value;}); 

        //store thet json object in local storage
        localStorage.setItem("formData",data);

        console.log(data)

        //a blank html string
        var html="";
        p=data;
        for (var key in p) {
            html=html+"<tr>"
            if (p.hasOwnProperty(key)) {
                html=html+"<td>"+p[key]+"</td>";
            }
            html=html+"</tr>";
        }

        //finally put html string in a table 
        $("tbody").html(html)

        //now call ajax 
        $.ajax({

              url:backend-api-url,

              method:'get/post',

              data:{
                   name:$('#name').val(),
                   email:$('#email').val(),
                   message:$('#message').val(),
              },

              success:function(data){console.log("done!!!"),}

        })
    })
</script>

如何在本地存储中保存数据并添加到表中

2 个答案: