ローカルストレージにデータを保存してテーブルに追加する方法

Question

ここに私の要件が提出されます。データはテーブル形式で表示され、5回の提出後にレコードがデータベースに保存されます。

ローカルでレコードを保存する方法と、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の方法を使用して、データへのこのオブジェクトと[OK]を、これを試してみてください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>