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

现在让我们说内容改变如下：第一个孩子：4 第二个孩子：5 第3个孩子：10个

现在，当我检索所有3个孩子的div显示4.如何解决这个问题？

Answer 1

当我尝试使用localstorage保存其内容并检索它们时，第一个div的html将被复制到其他2个div中。

嗯，当然是 - 这就是你的代码明确做的事情。您在本地存储中只有一个 counter，并且您在each循环中反复覆盖它以进行保存，并且您反复重新检索并将其应用于{{1获取循环。

使用不同的名称（each，counter0等）将不同div的文本存储在本地存储中。您可以从第一个参数到counter1获取它们，这是您正在访问的元素的索引。

如果不存在，则检索并创建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);
    }
});

Answer 2

你需要：

为每个localStorage元素使用不同的div项，与T.J相同。克劳德说。
或撰写所有文字的array并将其保存在一个localStorage项目中。

如果你选择上面提到的第一个选项，在jQuery index函数中使用.each()来设置和获取localStorage项。

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

使用此代码，您可以猜出在getting项目时您将编写的代码。

读取：.each() | jQuery

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

2 个答案: