HTML5 localStorage按键顺序

我的页面上有一些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);

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

回答:

不要依赖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按键顺序 的全部内容, 来源链接: utcz.com/qa/424949.html

回到顶部