Если ключ localalstorage существует, добавьте <li> - PullRequest
Новая
       0

Если ключ localalstorage существует, добавьте <li>

3 голосов
/ 10 ноября 2011

У меня есть небольшое автономное приложение, которое позволяет динамически создавать ящики, и ящики хранятся в локальном хранилище.Ящики <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);
    });

Теперь каждый раз, когда вы создаете ящик, он хранит ключ в локальном хранилище со своим идентификатором.Таким образом, с 2 полями локальное хранилище выглядит так:

enter image description here

Значение 'icon' - это фоновое изображение каждого блока.

Мой вопрос: включенобновите или откройте, как лучше всего проверить, существует ли идентификатор (, например, 'bm-item-1', 'bm-item-2' ) и добавить поля * / 1020 *.

Должен ли я создать новый ключ, в котором будет храниться количество существующих ящиков?И как я могу разобрать их, когда вы посещаете сайт?

Ответы [ 2 ]

0 голосов
/ 26 ноября 2011

Вы также можете сделать что-то вроде этого:

Вы можете легко загружать элементы для отображения пользователям.

Просто переберите все элементы в локальном хранилище, используя 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, но идея здесь.

0 голосов
/ 10 ноября 2011

Я бы использовал другой способ хранения ваших объектов. 

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
}

Конечно, вам нужно изменить способ хранения ваших данных на этом этапе.Добавьте новый объект в массив результатов и повторно сохраните его.В любом случае, я думаю, вы знаете, как с этим справиться:)

ОБНОВЛЕНИЕ

Я создал для вас базовый пример http://jsfiddle.net/manuel/29gtu/

Обратите внимание, чтовам нужно включить JSON2 для поддержки IE объекта JSON

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...