存储下拉选择数据在本地存储使用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 
}];