我试图在html表单的帮助下将用户输入作为JSON存储在本地存储中，然后尝试在html表中显示它们。
我可以看到使用inspect元素工具将值存储在本地存储中，但出现了问题，我的值没有显示在表上。
我也试过用不同的方法做，但都没用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Putting User Input into JS Objects</title>
<style>
.formBox{
padding: 0.5rem 2rem;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<form>
<div class="formBox">
<label for="fname">First Name:</label>
<input type="text" id="fname" placeholder="FirstName"/>
</div>
<div class="formBox">
<label for="lname">Last Name:</label>
<input type="text" id="lname" placeholder="LastName"/>
</div>
<div class="formBox">
<label for="gender">Gender:</label>
<select name="gender" id="gender" >
<option value="Male" selected disabled>Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="prefer not to say">Prefer Not to Say</option>
</select>
</div>
<div class="formBox">
<label for="age">Age</label>
<input type="number" id="age" min="1" placeholder="Age"/>
</div>
<div class="formBox">
<label for="specialization">Specialization:</label>
<select name="specialization" id="specialization" >
<option value="Not Selected" selected disabled>Specialization</option>
<option value="Database Programmer">Database Programmer</option>
<option value="Web Developer">Web Developer</option>
<option value="Software Programmer">Software Programmer</option>
<option value="Network Engineer">Network Engineer</option>
</select>
</div>
<div class="formBox">
<label for="exp">Experience</label>
<input type="number" id="exp" min="1" placeholder="Experience"/>
</div>
<div class="formBox">
<label for="achi">Achievements</label>
<input type="text" id="achi" placeholder="Achievements"/>
</div>
<div class="formBox">
<button onclick="Submit()">Add</button>
</div>
<div id="msg">
<pre></pre>
</div>
</form>
<table id="table">
<tr>
<th>F. Name:</th>
<th>L. Name:</th>
<th>Gender:</th>
<th>Age:</th>
<th>Specialization:</th>
<th>Experience:</th>
<th>Achievements:</th>
</tr>
<tr id ="tbl_data">
</tr>
<tr>
</table>
<script>
var taskData = [];
var i = null;
function Submit() {
if (taskData.length > 0) {
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var gender = document.getElementById('gender').value;
var age = document.getElementById('age').value;
var specialization = document.getElementById('specialization').value;
var experience = document.getElementById('exp').value;
var achievement = document.getElementById('achi').value;
const obj = { "fname": fname, "lname": lname, "gender": gender, "age": age, "specialization": specialization, "exp": experience, "achi": achievement }
var stored = JSON.parse(localStorage.getItem("task"));
stored.push(obj);
}
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var gender = document.getElementById('gender').value;
var age = document.getElementById('age').value;
var specialization = document.getElementById('specialization').value;
var experience = document.getElementById('exp').value;
var achievement = document.getElementById('achi').value;
const obj = { "fname": fname, "lname": lname, "gender": gender, "age": age, "specialization": specialization, "exp": experience, "achi": achievement }
taskData.push(obj);
localStorage.setItem("task", JSON.stringify(taskData));
document.getElementById("result").innerHTML = localStorage.getItem("task");
if (i == null) {
i = 0;
}
for (i = i; i < taskData.length; ++i) {
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = i + 1;
row.insertCell(1).innerHTML = taskData[i].fname;
row.insertCell(2).innerHTML = taskData[i].lname;
row.insertCell(3).innerHTML = taskData[i].gender;
row.insertCell(4).innerHTML = taskData[i].age;
row.insertCell(5).innerHTML = taskData[i].specialization;
row.insertCell(6).innerHTML = taskData[i].exe;
row.insertCell(7).innerHTML = taskData[i].achi;
i = i;
}
}
</script>
</body>
</html>我不确定您的确切错误，但您可以通过用户输入轻松设置和显示具有功能的项目。这里是代码-
function saveData() {
var userinput = prompt("Enter anything")
localStorage.setItem("userinput", JSON.stringify(userinput));
}
function loadData() {
var stored = localStorage.getItem('userinput');
if (stored == null) {
document.write("No data has been saved yet")
} else {
document.write('Saved Object: ' + JSON.parse(stored));
}
}
第一：没有id为"的元素；结果"；在HTML中。。。因此不显示任何内容。在HTML中的任何位置创建<div id="result"></div>。
第二：您在function Submit()中调用document.getElementById("result").innerHTML = localStorage.getItem("task");。将其移至函数上方或下方。
以下是有效的解决方案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local Storage Persistence Testing</title>
<style>
form { padding: 0.5rem 2rem; }
table { border-collapse: collapse; width: 100%; }
td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; }
</style>
</head>
<body>
<!-- Form elements -->
<form>
<input type="text" id="fname" placeholder="FirstName"/>
<input type="text" id="lname" placeholder="LastName"/>
<select name="gender" id="gender" >
<option value="Male" selected disabled>Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="prefer not to say">Prefer Not to Say</option>
</select>
<input type="number" id="age" min="1" placeholder="Age"/>
<select name="specialization" id="specialization" >
<option value="Not Selected" selected disabled>Specialization</option>
<option value="Database Programmer">Database Programmer</option>
<option value="Web Developer">Web Developer</option>
<option value="Software Programmer">Software Programmer</option>
<option value="Network Engineer">Network Engineer</option>
</select>
<input type="number" id="exp" min="1" placeholder="Experience"/>
<input type="text" id="achi" placeholder="Achievements"/>
<button onclick="LocalDataStore()">Add</button>
</form>
<!-- Table data display -->
<table id="table">
<tr>
<th>F. Name:</th>
<th>L. Name:</th>
<th>Gender:</th>
<th>Age:</th>
<th>Specialization:</th>
<th>Experience:</th>
<th>Achievements:</th>
</tr>
</table>
<!-- Scripts -->
<script>
// Load table data from local storage
if (JSON.parse(localStorage.getItem("task"))){
var sData = JSON.parse(localStorage.getItem("task"));
for (i = 0; i < sData.length; i++) {
var row = document.getElementById("table").insertRow();
row.insertCell(0).innerHTML = sData[i].fname;
row.insertCell(1).innerHTML = sData[i].lname;
row.insertCell(2).innerHTML = sData[i].gender;
row.insertCell(3).innerHTML = sData[i].age;
row.insertCell(4).innerHTML = sData[i].specialization;
row.insertCell(5).innerHTML = sData[i].exp;
row.insertCell(6).innerHTML = sData[i].achi;
}
}
// Store data to local storage
function LocalDataStore() {
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var gender = document.getElementById('gender').value;
var age = document.getElementById('age').value;
var specialization = document.getElementById('specialization').value;
var experience = document.getElementById('exp').value;
var achievement = document.getElementById('achi').value;
var taskData = {
"fname": fname,
"lname": lname,
"gender": gender,
"age": age,
"specialization": specialization,
"exp": experience,
"achi": achievement
};
if (!JSON.parse(localStorage.getItem("task"))) {
localStorage.setItem("task", JSON.stringify([taskData]));
} else {
var localStorageData = JSON.parse(localStorage.getItem("task"));
localStorageData.push(taskData);
localStorage.setItem("task", JSON.stringify(localStorageData));
}
}
</script>
</body>
</html>