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中的正确位置(这样在下次单击时就不会对数据进行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[n]遍历localStorage上的所有可用键，但这引用了一个可以与localStorage[str_key]或localStorage.getItem(str_key)一起使用的键(字符串)。

在本例中，您混淆了localStorage键名称的索引和分配给项的名称。因此，不要使用key索引，而要使用value key：

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

Answer 2

在localStorage中创建一个单独的对象以：

• 避免污染存储空间(如果只填充根节点，以后很难添加额外的功能)
• Get

back :-)

localStorage.specificStorage = {}; // Maybe even []