HTML5 localStorage按键顺序

Question

我的页面上有一些div，编码为

<div id="1">Click Me to load corresponding dynamicList</div><ul class="dynamicList"></ul>
<div id="2">Click Me to load corresponding dynamicList</div><ul class="dynamicList"></ul>
<div id="3">Click Me to load corresponding dynamicList</div><ul class="dynamicList"></ul>
<div id="4">Click Me to load corresponding dynamicList</div><ul class="dynamicList"></ul>
<div id="5">Click Me to load corresponding dynamicList</div><ul class="dynamicList"></ul>

现在，单击任何一个div，就会进行AJAX调用，将动态列表返回为：

<li>Some content 1</li>
<li>Some content 2</li>
<li>Some content 3</li>

我想在第一次AJAX调用之后将上述动态列表存储在localStorage中。所以我写；

var key = $(selectedDiv).attr('id');     
var value = str;     //str = Returned AJAX response of li's
localStorage.setItem(key, value);

现在，在下一页加载中，我想在DOM的正确位置附加所有dynamicList（所有用户之前单击的那些）（因此，在下次单击期间不会对数据进行AJAX调用）

for (i=0;i<localStorage.length;i++) 
{
var key = localStorage.key(i);
    if(key != null) 
    {
    var value = localStorage.getItem(key); 
    $("#"+i).next(".dynamicList").empty();
    $("#"+i).next(".dynamicList").append(value);
    }
}

现在似乎在localStorage的顺序中出现了一些问题，因为正确的dynamicList没有被附加在正确的位置。我想这条线有问题

var key = localStorage.key(i);

请让我知道如何解决此问题。

Answer 1

不要依赖localStorage键的顺序。您可以通过在所有可用的键重复localStorage使用localStorage[n]，而是指可以使用一个密钥（字符串）localStorage[str_key]或localStorage.getItem(str_key)。

在您的情况下，您已经将localStorage键名的索引与您分配给该项的名称混淆了。因此，不要使用键索引，而要使用值键：

for (i=0;i<localStorage.length;i++) 
{
var key = localStorage.key(i);
    if(key != null) 
    {
    var value = localStorage.getItem(key); 
    $("#"+key).next(".dynamicList").empty();
    $("#"+key).next(".dynamicList").append(value);
    }
}