我正在嘗試將用戶輸入作為 JSON 數組存儲在本地存儲中，並將它們顯示在 HTML 表中
[英]I am trying to store user input as JSON array in local storage and displaying them in HTML table
問題描述
我試圖在 html forms 的幫助下將用戶輸入作為 JSON 存儲在本地存儲中，然后嘗試在 ZFC365FDC70D2EC769 表中顯示它們。
我可以使用檢查元素工具看到存儲在本地存儲中的值，但是出了點問題，我的值沒有顯示在表格上。
我也嘗試過以不同的方式進行操作，但沒有任何效果。
<,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>
2 個解決方案
解決方案1
0 2022-01-29 20:16:23
我不確定您的確切錯誤，但您可以輕松設置和顯示具有用戶輸入功能的項目，這里是代碼 -
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));
}
}
解決方案2
0 2022-01-29 20:38:17
您在 HTML 中沒有 id 為“result”的元素......所以沒有顯示任何內容。
...
document.getElementById("result").innerHTML = localStorage.getItem("task");
有沒有辦法可以將圖像和字符串添加到數組並存儲在本地存儲中並使用 JavaScript 顯示它們？
[英]is there a way I can add images and strings to an array and store on local storage and display them using JavaScript?
當單擊按鈕時，我試圖將輸入的內容保存到本地存儲中。 我究竟做錯了什么？
[英]I'm trying to save the content of an input into local storage when a button is clicked. What am I doing wrong?
將多個表單輸入值以數組的形式存儲在 JavaScript 中的本地存儲中
[英]Store multiple form input values in local storage in JavaScript in the form of an array
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.