javascript - 为什么检索方法在这里不起作用？

Question

假设有 3 个 div(可能有数千个这样的 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());
});

现在假设内容更改如下:第一个 child :4第二个 child :5第三个 child :10

现在，当我检索所有 3 个子 div 时，都显示 4。如何解决此问题？

Answer 1

When I try to save their content using localstorage and retreive them the first div's html is copied in the other 2 divs.

嗯，当然是这样——这就是您的代码明确执行的操作。您在本地存储中只有一个计数器，并且您在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());
});