為什么檢索方法在這里不起作用？

Question

可以說，父div內有3個具有相同類的div（可能有成千上萬個這樣的div）。

他們每個人都有一些動態變化的文本。 當我嘗試使用localstorage保存其內容並檢索它們時，第一個div的html被復制到其他2個div中。

的HTML

 <div class="parent">
     <div class="child">*dynamically changing text</div>
     <div class="child">*dynamically changing text</div>
     <div class="child">*dynamically changing text</div>
 </div>

檢索內容的腳本

if (localStorage.getItem('counter') === null) 
{
    $(".parent > div").each(function()
    {
        localStorage.setItem('counter', $(this).find(".child").html());
    }); 
    var counter = 0;
} 
else 
{
    $(".parent > div").each(function()
    {
        $(this).find(".child").html(localStorage.getItem('counter'));
        var counter = localStorage.getItem('counter');
    });
}

設置內容的腳本

$(".parent > div").each(function()
{
    localStorage.setItem('counter', $(this).find(".child").html());
});

現在，我們將內容更改如下：第一個孩子：4第二個孩子：5第三個孩子：10

現在，當我檢索所有3個子div時都顯示4。如何解決此問題？

Answer 1

當我嘗試使用localstorage保存其內容並檢索它們時，第一個div的html被復制到其他2個div中。

好吧，這當然是您的代碼正在明確執行的操作。 你只有一個 counter在本地存儲，並反復覆蓋它在你的each循環的保存和反復重新檢索和您的應用它each環路得到。

使用不同的名稱（ counter0 ， counter1等）將不同div的文本存儲在本地存儲中。 您可以從第一個參數到each來獲取它們，這是您要訪問的元素的索引。

檢索並創建counterX如果不存在）：

$(".parent > div").each(function(index)
{
    var counter = localStorage.getItem('counter' + index);
    if (counter === null)
    {
        // Create
        localStorage.getItem('counter' + index, $(this).find(".child").html());
    }
    else
    {
        // Use
        $(this).find(".child").html(counter);
    }
});

設置：

$(".parent > div").each(function(index)
{
    localStorage.setItem('counter' + index, $(this).find(".child").html());
});

Answer 2

你需要：

• 就像TJ Crowder所說的那樣，對每個div元素使用不同的localStorage項。
• 或者，將所有文本組成一個array ，並將其保存在一個localStorage項中。

如果要使用上述第一個選項，請使用jQuery .each()函數中的index來設置和獲取localStorage項。

$(".child").each(function( index ) {
  localStorage.setItem('counter'+index, $(this).html());
});

使用此代碼，您可以猜測getting物品時將編寫的代碼。

閱讀 ： .each() | jQuery的