HTML5 localStorage 密钥顺序

Posted 2023-03-05

【中文标题】HTML5 localStorage 密钥顺序

【英文标题】：HTML5 localStorage key order

【发布时间】：2012-01-10 13:38:37

【问题描述】：

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

请告诉我如何解决这个问题。

【参考方案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);
    

【讨论】：

Perfetto....这就是我要找的...在 localStorage.key(i) 和 localStorage.getItem(key) 之间有点混淆

【参考方案2】：

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

避免存储空间的污染（如果只是填满根节点，以后添加额外的功能会很困难） 重新排序:-)

localStorage.specificStorage = ; // Maybe even []

【讨论】：

请注意，对象和数组不能存储在localStorage中。只有字符串可以。

您必须使用JSON.stringify将它们序列化为字符串。