在表中顯示本地存儲數據

Question

所以我目前將此存儲在我的localStorage中：

{cart: "[{"Author":"Micheal Grant","title":"Gone"},{{"Author":"Micheal 
Grant","title":"Fear"}]"

我只是想知道如何檢索這些數據並將其顯示在表中：

例如：

<table border="1">
  <tbody>
    <tr>
      <th> Book Title </th>
      <th> Author </th>
    </tr>
    <tr>
      <td class="Book_Title">Gone </td>
      <td class="Author">Micheal Grant</td>
    </tr>
    <tr>
      <td class="Book_Title">The Knife of never letting go</td>
      <td class="Author">Ryan Howard</td>

    </tr>
 </tbody>
</table>

Answer 1

好，這就是你應該做的

var cart= JSON.parse( localStorage.getItem('cart' ) );
    $.each(cart, function(key, value){
      $('tbody').append(`<tr>
      <td class="Book_Title">${cart.title}</td>
      <td class="Author">${cart.Author}</td>
    </tr>`)
})

Answer 2

一旦從localStorage檢索項目，如localStorage.getItem(dataObj); ，您可以使用jQuery的each()遍歷所有項目。 在處理函數中，使用值創建tr並將其附加到tbody 。

請注意，在append()使用了Template literals 。

請嘗試以下方式：

 //localStorage.getItem(dataObj); var jsonData = {cart: [{"Author":"Micheal Grant","title":"Gone"},{"Author":"Micheal Grant","title":"Fear"}]}; $.each(jsonData.cart, function(key, value){ $('tbody').append(`<tr> <td class="Book_Title">${value.title}</td> <td class="Author">${value.Author}</td> </tr>`); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1"> <tbody> <tr> <th> Book Title </th> <th> Author </th> </tr> </tbody> </table> 

Answer 3

您可以使用localStorage.getItem函數從localStorage檢索數據。

獲得數據后，遍歷cart屬性，並使用javascript template strings創建html結構。 使用模板字符串的優勢在於它更具可讀性，您可以使用${}輕松地在其中插入javascript變量。

 //localStorage.getItem(dataObj); var data = { cart: [{ "Author": "Micheal Grant", "title": "Gone" }, { "Author": "Micheal Grant", "title": "Fear" }] }; var tableData = data.cart.map(book => ( ` <tr> <td>${book.title}</td> <td>${book.Author}</td> </tr> ` )).join(''); var tbody = document.querySelector('#body'); tbody.innerHTML = tableData; 

 <table border="1"> <thead> <tr> <th> Book Title </th> <th> Author </th> </tr> </thead> <tbody id="body"> </tbody> </table>