ajax - 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 键名称的索引与您分配给该项目的名称混淆了。因此，不要使用键索引，而是使用您的值键:

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