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

假设在父div中有3个div（可以有数千个这样的div）具有相同的类

它们每个都有一些动态变化的文本。当我尝试使用localstorage保存它们的内容并检索它们时，第一个div的html会复制到其他两个div中

HTML

设置内容的脚本

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。如何解决这个问题

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

当然，这就是您的代码显式执行的操作。您在本地存储中只有一个

计数器

，您在

每个

循环中重复覆盖它以进行保存，并在

每个

循环中重复重新检索并应用它以获取

使用不同的名称（

counter0

，

counter1

等）将不同div的文本存储在本地存储器中。您可以从第一个参数到

每个

，这是您正在访问的元素的索引

检索并创建计数器X（如果它不存在）：

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

您需要：

• 或者对每个

  div

  元素使用不同的

  localStorage

  项，正如T.J.Crowder所说
• 或者将所有文本组成一个

  数组

  ，并将其保存在一个

  本地存储

  项中

如果选择上面提到的第一个选项，请在jQuery

.each（）

函数中使用

index

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

使用此代码，您可以猜测在获取项目时要编写的代码

---

Readup:

计数器

是一个字符串，它是键，因此每次都会在localStorage中覆盖该索引。在localStorage中存储数千个元素的内容真的是个好主意吗？好的，我现在明白了。但是现在如何为每个div自动创建一个计数器@AnupamRam：你说的“自动创建”是什么意思？如果有几百个div呢？无法手动创建计数器0、计数器1…正常运行计数器100。如何自动创建所有这些计数器？@AnupamRam:为什么不可能？但是看看我添加的代码，它可能会有所帮助。“就像T.J.Crowder说的那样……”那么为什么要重复它呢？@T.J.Crowder好吧，我想添加代码，让他在

.each（）

循环中索引

。这就是我想让我的答案与你的不同的原因。
$(".child").each(function( index ) {
  localStorage.setItem('counter'+index, $(this).html());
});