Question

我有一个小型离线应用，您可以动态创建框，这些框存储在localstorage中。方框是<li>。

HTML看起来像这样：

<ul id="bxs" class="tabs"> 

            <li id="item-1">1</li> 
            <li id="item-2">2</li> 
            <li id="item-3">3</li> 
            <li id="item-4">4</li> 
            // etc
</ul>

<li>的创建如下：

$("#NewItem").click(function(e) {
         e.preventDefault();
        var itemCount = ($("[id^='item-']").length + 1);
        var element = $("<li id='item-" + itemCount + "'>" + itemCount + "</li>");
        $("#bxs").append(element);
    });

现在，每次创建一个框时，它都会在localstorage中存储一个带有id的密钥。所以有2个盒子，本地存储看起来像这样：

enter image description here

值'icon'是每个框的背景图像。

我的问题是：刷新或打开时，检查ID是否存在的最佳方法是什么（，例如'bm-item-1'，'bm-item-2'）并追加<li>的/箱子。

我应该创建一个新密钥，它将存储多少个盒子？一旦您访问该网站，我该如何解析它们？

Answer 1

我会使用另一种存储对象的方式。

var result = [
    {id: 1, icon: "a"},
    {id: 2, icon: "a"}
];

for(var i=0;i<result.length;i++) {
    var item = result[i];
    // item.id
    // item.icon
}

当然，您需要在此时更改存储数据的方式。将新对象追加到结果数组中并重新保存。 Anway我想你知道如何管理：）

<强>更新

我为您创建了一个基本示例http://jsfiddle.net/manuel/29gtu/

请注意，您需要包含JSON2以获取对JSON对象的IE支持

Answer 2

您也可以这样做：

您可以轻松加载要向用户显示的项目。

在页面加载时，只需使用Javascript遍历本地存储中的所有项目......

<body>
<script language="JavaScript" type="text/javascript">
var item = "";//array to hold string values for each key value
var key ="";//array to hold string values for each key name
for (i=0;i < localStorage.length;i++) {

    var count = 0;
    if (key != "" | key != null) { //or matches what you're looking for
       item[count] = localStorage.getItem(key);
       key(i) = localStorage.key(i);
       count += 1;
    }

 }

function load_table()
{
if (item == "" || item == " " || item == null) {
   document.write("<div id=\"list_table\" style=\"display: block;\">");
   document.write("<h3>You have no stored items.</h3>");
   document.write("</div>");
}
else {
   document.write("<div id=\"list_table\" style=\"display: block;\">");
   document.write("<h3>Stored Items</h3>");
   document.write("<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");

  for (i=0;i < item.length;i++) {
      document.write("<tr><td width=\"33%\" valign=\"top\">"+item(i)+"</td>");
      document.write("<td width=\"67%\" valign=\"top\" style=\"padding-left: 0px; text-transform: capitalize;\">"+key(i)+"</td></tr>");
   }
 }


document.write("</table>");
document.write("</div> <!-- end list_table div -->");
 } // end if (item != "")
} // end load_table
</script>

在html中，你可以在适当的位置粘贴一个可以显示或隐藏的div。

<div id="items_table" style="display: none;">
<script language="JavaScript" type="text/javascript">
//alert("calling load_table");
load_table();
//alert("DONE calling load_table");
</script>
</div>

你可能想要一些JQuery的内容，但这个想法就在那里。

如果存在localstorage密钥，请追加<li> </li>

2 个答案: