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];
    })
}

} }）;

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

Answer 1

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

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

'["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 td").each(function(i){ … });

...但是桌子主体仍然只有一行，有两个单元格：

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

因此，循环索引（i）对于具有＆＃34;史蒂夫＆＃34;的单元格永远不会超过1 - 0，对于具有史蒂夫出生日期的单元格而言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。所以看起来什么也没发生。

简单的解决方案是在将数据加载到表中之前添加所需的空行/单元格：

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（尝试在此处发布，但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>');
        }

    }
}

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

2 个答案: