从本地存储检索数据不起作用

Question

我可以保存到本地存储，但是当我添加代码来检索数据时它不起作用。我可以看到代码已保存，因为我在 chrome 中使用 F12 检查过。任何指导将不胜感激。

 <!DOCTYPE html>
 <html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" 
 href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-
 1.4.5.min.js"></script>
 </head>
 <body>
 <form>
 <input type="text" id="task" placeholder="name">
 <input type="text" id="date" placeholder="dd/mm/yyyy">
 <input type="button" class="add-row" value="Add Row">

 </form>
 <table id="task_table">
 <thead>
    <tr>
        <th>Name</th>
        <th>Date</th>
    </tr>
 </thead> 
 <tbody>
    <tr>
        <td>steve</td>
        <td>13/12/1956</td>
    </tr>

 </tbody>

 </table>
 <button id="saveAll">Save List</button>


 <script>$("#saveAll").click(function(e) {


 var listBirthdays = [];
 $("table td").each(function(){
   listBirthdays.push(this.innerHTML);
 })
 localStorage.setItem('birthdayList', JSON.stringify(listBirthdays));
 });

 </script>


 <script>
 $(document).ready(function(){
 $(".add-row").on('click',function(){
    var task = $("#task").val();
    var date = $("#date").val();
    var markup = "<tr><td>" + task + "</td><td>" + date + "</td></tr>";
    $('table tbody').append(markup);

 });


            }
     );

;


</script>

下面显示了我尝试用来从存储中重新加载数据的代码。

loadList();

function loadList() {
if (localStorage.getItem('birthdayList')){ 
    var listBirthdays = JSON.parse(localStorage.getItem('birthdayList'));
    $("table td").each(function(i){
      this.innerHTML = listBirthdays [i];
    })
}

} });

当我添加应该检索数据的代码时，它不会将其添加回 table。

Answer 1

问题出在 loadList 函数中的 .each 循环。

让我们假设存储的值如下所示：

'["steve", "13/12/1956", "jane", "04/04/1987", "peter", "01/03/1999"]'

它被解析并加载到 listBirthdays 数组中：

console.log(listBirthdays[0]) // -> "steve"
console.log(listBirthdays[1]) // -> "13/12/1956"
console.log(listBirthdays[2]) // -> "jane"
                              //     …etc.

然后，.each 循环在您的 table 单元格上运行：

$("table td").each(function(i){ … });

…但是 table 正文仍然只有一行，有两个单元格：

<td>steve</td>
<td>13/12/1956</td>

因此，对于带有 "steve" 的单元格，循环索引 (i) 永远不会超过 1 – 0，对于带有 Steve 出生日期的单元格，则为 1。然后循环结束，因为没有更多的单元格了：

// i = 0
this.innerHTML = listBirthdays[0]; // listBirthdays[0] = "steve"

// i = 1
this.innerHTML = listBirthdays[1]; // listBirthdays[1] = "13/12/1956"

// 'i' will never get to 2 as there are no more cells, listBirthdays[2] (and further) will never be used

单元格内容替换为 listBirthdays 数组的前两个值 – steve 替换为 steve，13/12/1956 替换为 13/12/1956.所以看起来什么都没发生。

简单的解决方案是在将数据加载到 table 之前添加所需的空 rows/cells:

function loadList() {
  if (localStorage.getItem("birthdayList")) {
    var listBirthdays = JSON.parse(localStorage.getItem("birthdayList"));
    // calculate how many rows we need:
    var newRows = listBirthdays.length / 2; // for 2 columns
    // replace tbody content with the new rows:
    $("tbody").html("<tr><td></td><td></td></tr>".repeat(newRows));
    // table now has two cells for each name–date pair
    $("tbody td").each(function(i, cell) {
      cell.innerHTML = listBirthdays[i];
    });
  }
}

Working example on Codepen（在这里尝试 post，但是 localStorage 在 SO 片段中不起作用）

但是，更合乎逻辑的方法是根据数据渲染单元格，而不是相反。

Answer 2

因为@helb 已经解释了您的代码的问题。这个问题有一个替代解决方案，只需将您的 loadList 函数更改为：-

 function loadList() {


    if (localStorage.getItem('birthdayList')) {

        var listBirthdays = JSON.parse(localStorage.getItem('birthdayList'));

        $("#task_table").find("tr").remove();

        for (i = 0; i < listBirthdays.length - 1; i = i + 2) {
            $('#task_table tbody').append('<tr>' + '<td>' + listBirthdays[i] + '</td>' + '<td>' + listBirthdays[i + 1] + '</td>' + '</tr>');
        }

    }
}

从本地存储检索数据不起作用

Retrieving data from local storage not working

javascript

forms

jquery

json

jquery-mobile