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调用，将动态List返回为;

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

我想在第一次AJAX调用之后将上面的动态List存储在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.specificStorage = {}; // Maybe even []

Answer 2

不要依赖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);
    }
}

HTML5 localStorage键盘顺序

2 个答案: