将表单数据存储在本地存储中并显示在表格中答案

【问题标题】：Store form data in Local Storage and display in table将表单数据存储在本地存储中并显示在表格中
【发布时间】：2020-06-21 17:06:55
【问题描述】：

如何存储表单输入数据？如何取回并采取更新、删除和清除等操作？

使用 localStorage.setItem() 存储数据；使用 localStorage.getItem() 获取数据；我正在接受用户输入并尝试使用 JSON 在本地保存。想要使用 JSON 解析获取数据以表格形式保存。想要在点击时执行一些操作，例如添加数据、删除数据。使用 clear data() 函数清除表。所以我有相关的功能。
我是新的。没有完全理解逻辑。

HTML 表格：

<form id="form">
    <label for="fname">First name:  
    <input type="text" id="fname" name="fname" placeholder 
     ="name">
    </label><br>
  
    <label for="lname">Last name:
    <input type="text" id="lname" name="lname"><br>
    </label><br>
      
    <button class="btn">Add</button>
    <button class="btn">Clear List</button>
</form>       
        
<table id="myTable">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
          <th> Action</th>
      </tr>
      <tableBody id="tabledata">
      <tr>
        <td>cc </td>
        <td> qq </td> 
        <td><button class="btn">Delete</button></td>
      </tr>
    </tableBody>
</table>

脚本：

  let myfName = document.getElementById("fName").value; 
  let mylName = document.getElementById("lName").value;  
         
       if(localStorage.getItem('itemJson') == null){
                itemJsonArray =[];
                itemJsonArray
                .push([ myfName, mylName]);
                localStorage.setItem('itemJeson', 
               JSON.stringify(itemJsonArray))
                }
            else{
                itemJsonArrayStr 
              localStorage.getItem('itemJeson');
                itemJsonArry = JSON.parse(  
              itemJsonArrayStr);
                
               itemJsonArray
                .push([ myfName, mylName]);
                localStorage.setItem('itemJeson', 
               JSON.stringify(itemJsonArray))
              }
         
update();
      // updating inputs in table   
     function update(){ 
         if(localStorage.getItem('itemJson') == null){
             itemJsonArray =[];
             localStorage.setItem('itemJeson', 
             JSON.stringify(itemJsonArray))
            }
            else{
                itemJsonArrayStr = 
                localStorage.getItem('itemJeson');
                itemJsonArry = JSON.parse(  
                itemJsonArrayStr);
               }
         let tableData document.getElementById("tabledata");
         let str = "";
            itemJsonArray.forEach((element, index) => {
                
       str += ` <tr>
        <th scope="row"> ${index}</th>
         <td> ${element[0]}</td>
          <td> ${element [1]}</td>
          <td><button  class="btn btn-warning btn-sm" onclick = "deleted(${index}" >Delete</button></td>
                    </tr>`;
            }); 
       tablebody.innerHTML = str;
            
        }
           
      let add = document.getElementById("addItem");
      add.addEventListener("click", getAndUpdate);
            
 update();

【问题讨论】：

标签： javascript json

【解决方案1】：

<!DOCTYPE html>
<html>
<body>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

</style>

<div id="result"></div>
<input id="data"></input>
<input type="date" id="date" name="date" value="2018-07-22" min="2018-01-01" max="2018-12-31">
<button onclick="Submit()">Submit</button>
<button onclick="Clear()">Clear</button>
<br><br><br><br><br>
<table id="table">
  <tr>
    <th>SL. NO</th>
    <th>Task Name</th>
    <th>Date</th>
  </tr>
  <tr id ="tbl_data">
  </tr>
  <tr>
</table>

<script>
// Check browser support

var taskData = [];
var i = null;
function Submit(){
    if(taskData.length > 0){
        var data = document.getElementById('data').value;
        var date = document.getElementById('date').value;
        const obj = { "data": data , "date": date}
        var stored = JSON.parse(localStorage.getItem("task"));
        stored.push(obj);
    }
    var data = document.getElementById('data').value;
    var date = document.getElementById('date').value;
    const obj = { "data": data , "date": date}
    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].data;
    row.insertCell(2).innerHTML= taskData[i].date;
    i=i;
        
    }
    
}
  // Retrieve
  
</script>

</body>
</html>

【讨论】：

如果它在这里不起作用，你可以在这里测试它w3schools.com/php/phptryit.asp?filename=tryphp_compiler