Javascript 显示来自本地存储阵列的数据问题

Posted 2023-03-05

【中文标题】Javascript 显示来自本地存储阵列的数据问题

【英文标题】：Javascript Displaying Data From Local Storage Array Problem

【发布时间】：2021-10-29 09:57:39

【问题描述】：

我正在使用 javascript 创建一个简单的 CRUD 应用程序，但在从本地存储显示数据表时遇到问题。

这就像制作一个待办事项列表，但这是一个表格，并在一行和一列中输入数据。

我不知道如何清楚地解释问题，重要的是我希望我输入表单并提交到本地存储的结果在表格中正确显示。

这是代码：

const 
  myForm       = document.forms['my-form']  // form name pada tag html form
, table        = document.querySelector('#myTable tbody')
, dataArr       = JSON.parse(localStorage.getItem('dataArr') || '[]');

var selectedRow = null
var number = 0

// Tabel init
dataArr.forEach(row=>
    let newRow = table.insertRow()

    newRow.insertCell().textContent = row.no = ++number
    newRow.insertCell().textContent = row.inputNL
    newRow.insertCell().textContent = row.inputJK
    newRow.insertCell().textContent = row.inputNH
    newRow.insertCell().textContent = row.inputA 
    newRow.insertCell().innerHTML = `<a onClick="onDelete(this)"><i class="fas fa-times"></i></a>`
)

function onFormSubmit() 
    if (validate()) 
        if (selectedRow == null) 
            // Menambahkan entri ke LocalStorage :
            dataArr.push(Object.fromEntries(new FormData(myForm).entries()))
            localStorage.setItem('dataArr', JSON.stringify( dataArr ))
            
            // Memasukkan Data pada Baris Baru
            let newRow = table.insertRow()
            
            newRow.insertCell().textContent = myForm.no.value = ++number
            newRow.insertCell().textContent = myForm.inputNL.value
            newRow.insertCell().textContent = myForm.inputJK.value
            newRow.insertCell().textContent = myForm.inputNH.value
            newRow.insertCell().textContent = myForm.inputA.value
            newRow.insertCell().innerHTML = `<a onClick="onDelete(this)"><i class="fas fa-times"></i></a>` 
         
        resetForm();
    


// Function untuk Mereset Data yang sudah diSumbit di dalam Input
function resetForm() 
    document.getElementById("no").value = "";
    document.getElementById("inputNL").value = "";
    document.getElementById("inputJK").value = "Pria";
    document.getElementById("inputNH").value = "";
    document.getElementById("inputA").value = "";
    selectedRow = null;


// Function untuk Delete Data
function onDelete(td) 
    if (confirm('Apa kamu yakin ingin Menghapus Data ini?')) 
        row = td.parentElement.parentElement;
        document.getElementById("myTable").deleteRow(row.rowIndex);
        resetForm();
    
    hapusDataLocal(td.parentElement.parentElement)


function hapusDataLocal(dataItem)     
    dataArr.forEach(function(task, index) 
        if (dataItem.textContent === task )             
            dataArr.splice(index, 1);
        
    );
    localStorage.setItem(dataArr, JSON.stringify(dataArr))


// Function untuk Memvalidasi Data
function validate() 
    isValid = true;
    if (document.getElementById("inputNL").value == "" || document.getElementById("inputJK").value == "" || document.getElementById("inputNH").value == "" || document.getElementById("inputA").value == "") 
        isValid = false;
        alert("Isi Semua Formnya dengan Benar!");
     
    return isValid;

    <!-- Registration Form -->
    <div class="container w-50 mt-3 shadow p-3 mb-5 bg-white rounded">
      <div class="p-3">
          <h1 class="mb-4">Registration Form</h1>
            <form class="task-form" name="my-form" onsubmit="event.preventDefault();onFormSubmit();" autocomplete="off">
              <input type="hidden" name="no" id="no" value=""> 
              <label for="inputNL" class="form-label">Nama Lengkap</label>
              <input type="text" id="inputNL" name="inputNL" class="form-control mb-2" placeholder="Nama Lengkap">
              <label for="inputJK"class="form-label">Jenis Kelamin</label>
              <select class="form-select mb-2" id="inputJK" name="inputJK">
                <option value="Pria">Pria</option>
                <option value="Wanita">Wanita</option>
              </select>            
              <label for="inputNH" class="form-label">No HP</label>
              <input type="number" id="inputNH" name="inputNH" class="form-control mb-2" placeholder="No HP">
              <label for="inputA" class="form-label">Alamat</label>
              <textarea id="inputA" name="inputA" class="form-control mb-2" style="min-width: 100%" placeholder="Alamat"></textarea>
              <input type="submit" value="Submit" class="btn btn-primary btn-md my-3">
            </form>
      </div>
    </div>
    <!-- Table -->
    <div class="container mt-3 shadow p-3 mb-5 bg-white rounded">
      <div class="p-3">
        <table class="table" id="myTable">
          <thead>
              <th scope="col">#</th>
              <th scope="col">Nama Lengkap</th>
              <th scope="col">Jenis Kelamin</th>
              <th scope="col">No HP</th>
              <th scope="col">Alamat</th>
              <th scope="col">Aksi</th>
          </thead>
          <tbody>

          </tbody>
        </table>
      </div>      
    </div>

这是表中的问题，数据与列不匹配。

而我想要的实际结果是这样的。

【问题讨论】：

onFormSubmit 在哪里？请按照推荐的***.com/help/how-to-ask提供minimal-reproducible-example

我已经编辑了javascript代码，请再次检查

【参考方案1】：

做这样的事...

const 
  myForm       = document.forms['my-form']  // unique reference for ALL form's elements
, myTableTBody = document.querySelector('#myTable tbody')
, dataNL       = JSON.parse(localStorage.getItem('dataNL') || '[]')
  ;

// init table
dataNL.forEach(row=>
  
  let newRow = myTableTBody.insertRow()

  newRow.insertCell().textContent = row.no
  newRow.insertCell().textContent = row.inputNL
  newRow.insertCell().textContent = row.inputJK
  newRow.insertCell().textContent = row.inputNH
  newRow.insertCell().textContent = row.inputA
  newRow.insertCell().textContent = ''  
  )

myForm.onsubmit = e =>
  
  e.preventDefault()  

// add entries into local storage :
  dataNL.push(Object.fromEntries(new FormData(myForm).entries()))
  localStorage.setItem('dataNL', JSON.stringify( dataNL ))

// insert new row 

  let newRow = myTableTBody.insertRow()

  newRow.insertCell().textContent = myForm.no.value
  newRow.insertCell().textContent = myForm.inputNL.value
  newRow.insertCell().textContent = myForm.inputJK.value
  newRow.insertCell().textContent = myForm.inputNH.value
  newRow.insertCell().textContent = myForm.inputA.value
  newRow.insertCell().textContent = ''                   // Action
  

-> some help <-

【讨论】：

感谢您的回答.. 非常有帮助

老哥我还想问一件事，即如何删除LocalStorage中的数据

和你上面的回答一样，请问如何删除本地存储数据？

问题依旧，如何删除列中的项目行？我已经为我的问题编辑了代码 sn-p 中的代码，请检查有什么问题@Mister Jojo

不，我使用的是 Bootstrap 5.1.0

【参考方案2】：

首先：

改变

 <form class="task-form" name="my-form" onsubmit="event.preventDefault();onFormSubmit();" autocomplete="off">

到

 <form class="task-form" name="my-form" autocomplete="off">

Js 代码是：

const 
  myForm = document.forms['my-form']  // form name pada tag html form

//.... 

myForm.onsubmit = e =>
  
  e.preventDefault() 
  //...

从下面的 sn-p 添加我的 CSS（已屏蔽）

如何删除本地存储数据？

no的管理有些不一致。 我做了一些其他的修复。 删除<table><TR> 有效...

请不要将getElementById 用于表单元素！ 看看我是如何编写你的 validate() 函数的 关于这一点，请参阅我之前的帖子：Jun 30 at 13:06 和 Jun 14 '19 at 14:17

我和所有的程序员一样，一旦我开始了一个项目，我就不能半途而废。我希望这将帮助您更好地完成您的工作。

表格中转置的文本地址的显示有点头疼，有溢出问题；因此，正则表达式的想法至少可以删除不必要的白线 ... 所以，另见Single regex to remove empty lines and double spaces from multiline input

const 
  myForm  = document.forms['my-form']  // form name pada tag html form
, myTable = document.querySelector('#myTable')
, myTbody = document.querySelector('#myTable tbody')
, dataArr = JSON.parse(localStorage.getItem('dataArr') || '[]')
, rowsInfo =
     last_no  : 0
    , noSelect : true
    , index    : 0
    , tRow     : null
    
, addTableRow = row =>
    
    rowsInfo.last_no = Math.max( rowsInfo.last_no, row.no )

    let newRow = myTbody.insertRow()
      newRow.insertCell().textContent = row.no 
      newRow.insertCell().textContent = row.inputNL
      newRow.insertCell().textContent = row.inputJK
      newRow.insertCell().textContent = row.inputNH
      newRow.insertCell().innerHTML = `<div>$row.inputA</div>`
      newRow.insertCell().innerHTML = `<i class="fas fa-times"></i>`
    ;
dataArr.forEach(addTableRow) // Tabel init
  ;
myForm.onsubmit = e =>
  
  e.preventDefault() 
  if (validate())
    
    if (rowsInfo.noSelect)
      
      let newRow = Object.fromEntries(new FormData(myForm).entries())
      newRow.no  = ++rowsInfo.last_no

      dataArr.push(newRow)
      addTableRow (newRow) // Memasukkan Data pada Baris Baru
       
    else
      
      let
        index = rowsInfo.index
      , eTR   = rowsInfo.tRow
        ;
      eTR.cells[1].textContent = dataArr[index].inputNL = myForm.inputNL.value 
      eTR.cells[2].textContent = dataArr[index].inputJK = myForm.inputJK.value 
      eTR.cells[3].textContent = dataArr[index].inputNH = myForm.inputNH.value 
      dataArr[index].inputA    = myForm.inputA.value 
      eTR.cells[4].innerHTML   = `<div>$myForm.inputA.value</div>`

      eTR.classList.remove('selected')
      
    localStorage.setItem('dataArr', JSON.stringify( dataArr )) // Menambahkan entri ke LocalStorage 
    resetForm()
    
  
function resetForm() // Function untuk Mereset Data yang sudah diSumbit di dalam Input
  
  myForm.reset()
  rowsInfo.noSelect = true
  
function validate()  // Function untuk Memvalidasi Data
  
  myForm.inputNL.value = myForm.inputNL.value.trim()
  myForm.inputJK.value = myForm.inputJK.value.trim()
  myForm.inputNH.value = myForm.inputNH.value.trim()
  myForm.inputA.value  = myForm.inputA.value.replace(/^\s*$[\r\n]*|^[^\S\r\n]+|[^\S\r\n]+$|([^\S\r\n])2,/gm, '$1') 
  myForm.inputA.value  = myForm.inputA.value.replace(/\n*$/, '')  // remove final line break

  let isValid = 
    ( myForm.inputNL.value !== '' 
   && myForm.inputJK.value !== '' 
   && myForm.inputNH.value !== ''
   && myForm.inputA.value  !== '' 
    ) 
  if (!isValid) alert('Isi Semua Formnya dengan Benar!')
    ;
  return isValid
  
myTbody.onclick = (target) =>
  
  let
    eTR   = target.closest('tr')
  , rowNo = parseInt( eTR.cells[0].textContent )
  , index = dataArr.findIndex(x=>x.no===rowNo)
  , isDel = target.matches('i.fa-times, td:nth-of-type(6)')
    ;
  if (!eTR.classList.toggle('selected') && !isDel )
    
    resetForm()
    
  else 
    
    myTbody.querySelectorAll('tr').forEach(tr=>tr.classList.toggle('selected', eTR===tr))
 
    rowsInfo.noSelect    = false
    rowsInfo.index       = index
    rowsInfo.tRow        = eTR
    myForm.no.value      = dataArr[index].no
    myForm.inputNL.value = dataArr[index].inputNL
    myForm.inputJK.value = dataArr[index].inputJK
    myForm.inputNH.value = dataArr[index].inputNH
    myForm.inputA.value  = dataArr[index].inputA
    
    if (isDel && confirm('Apa kamu yakin ingin Menghapus Data ini?'))
      
      dataArr.splice(index, 1)
      myTable.deleteRow(eTR.rowIndex)
      localStorage.setItem('dataArr', JSON.stringify(dataArr))
      resetForm()
      rowsInfo.last_no = dataArr.reduce((mx,no)=>Math.max(mx,no),0)
       
   

#myTable 
  table-layout : fixed;  /* one of the Boostrap always missing... */
  
#myTable tbody tr.selected 
  background-color : darkblue;
  color            : whitesmoke;
  
#myTable tbody tr:hover 
  background-color : lightblue; 
  cursor           : pointer; 
  
#myTable tbody tr.selected:hover 
  background-color : #1c1ce0; 
  
#myTable tbody td:nth-of-type(5) div  
  max-height    : 1.2em;  /* no multilines displaying */
  white-space   : pre;
  overflow      : hidden;
   
#myTable th:nth-of-type(1), 
#myTable td:nth-of-type(1),
#myTable th:nth-of-type(6), 
#myTable td:nth-of-type(6)  
  width      : 4em;
  text-align : center;
  
#myTable tbody td:nth-of-type(6):hover  
  color : red;
  

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" 
      crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" >

<!-- Registration Form -->
<div class="container w-50 mt-3 shadow p-3 mb-5 bg-white rounded">
  <div class="p-3">
      <h1 class="mb-4">Registration Form</h1>
        <form class="task-form" name="my-form" autocomplete="off">
          <input type="hidden" name="no" id="no" value=""> 
          <label for="inputNL" class="form-label">Nama Lengkap</label>
          <input type="text" id="inputNL" name="inputNL" class="form-control mb-2" placeholder="Nama Lengkap">
          <label for="inputJK"class="form-label">Jenis Kelamin</label>
          <select class="form-select mb-2" id="inputJK" name="inputJK">
            <option value="Pria">Pria</option>
            <option value="Wanita">Wanita</option>
          </select>            
          <label for="inputNH" class="form-label">No HP</label>
          <input type="rowsInfo.last_no" id="inputNH" name="inputNH" class="form-control mb-2" placeholder="No HP">
          <label for="inputA" class="form-label">Alamat</label>
          <textarea id="inputA" name="inputA" class="form-control mb-2" style="min-width: 100%" placeholder="Alamat"></textarea>
          <input type="submit" value="Submit" class="btn btn-primary btn-md my-3">
        </form>
  </div>
</div>
<!-- Table -->
<div class="container mt-3 shadow p-3 mb-5 bg-white rounded">
  <div class="p-3">
    <table class="table" id="myTable">
      <thead>
          <th scope="col">#</th>
          <th scope="col">Nama Lengkap</th>
          <th scope="col">Jenis Kelamin</th>
          <th scope="col">No HP</th>
          <th scope="col">Alamat</th>
          <th scope="col">Aksi</th>
      </thead>
      <tbody> </tbody>
    </table>
  </div>      
</div>

localStorage 对象被认为对 SO sn-p 不安全

PS：我只使用Whitesmiths style