存儲下拉選擇數據在本地存儲使用javascript

Question

我是新來的JavaScript和一直存儲在本地存儲數據的一些問題。我想將表單數據存儲在JSON對象中，以便將記錄附加到對象數組中並可以保存在本地存儲中。但是每次當檢索select元素的值時，日誌都會顯示錯誤。下面的代碼：

home.html 

<form id="form" onsubmit="submit();"> 
    <h3 align="center" >Contact Form</h3> 

    <table align="center" cellspacing="3dp" cellpadding="20dp"> 
     <tr> 
      <td><label>Name:</label></td> 
      <td><input type="text" required align="center" size="20dp" id="name"></td> 
     </tr> 
     <tr> 
      <td><label>Email:</label></td> 
      <td><input type="email" required align="center" size="20dp" id="email"></td> 
     </tr> 
     <tr> 
      <td><label>Contact No.:</label></td> 
      <td><input type="text" required align="center" size="20dp" id="contact"></td> 
     </tr> 
     <tr> 
      <td><label>Gender:</label></td> 
      <td><select name="gender" id="gender"> 
       <option value="Male">Male</option> 
       <option value="Female">Female</option> 
       <option value="other">Other</option> 
      </select></td> 
     </tr> 
     <tr> 
      <td><label>Comments</label></td> 
      <td><textarea id="comment"></textarea></td> 
     </tr> 
     <tr><td><br></td></tr> 
     <tr> 
      <td><input type="submit" value="Submit" align="center"> </td> 
     </tr> 
    </table> 
</form> 

和JS：

main.js 
function submit() 
{ 
var myData = JSON.parse(localStorage.getItem('records'))||[]; 
var newData = 
[{ 
    'name': document.getElementById("name"), 
    'email': document.getElementById("email"), 
    'contact': document.getElementById("contact"), 
    'gender': document.getElementById("gender"), 
    'comment':document.getElementById("comment") 
}]; 
myData.push(newData); 
localStorage.setItem("records", JSON.stringify(myData)); 

var newData1 = JSON.parse(localStorage.getItem("records")); 

有什麼建議？

Answer 1

我想你會想看看這個updated fiddle

問題與您的代碼是你，你在對象存儲DOM elements而不是elements

值我改變了這種功能

var newData = 
[{ 
    'name': document.getElementById("name").value, 
    'email': document.getElementById("email").value, 
    'contact': document.getElementById("contact").value, 
    'gender': document.getElementById("gender").value, 
    'comment':document.getElementById("comment").value 
}];