Question

I have a small offline app which you can create boxes dynamically and the boxes are stored in localstorage. The boxes are <li>‘s.

The HTML Looks like this:

<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>

The <li>‘s are created like this:

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

Now, everytime you create a box, it stores a key in localstorage with its id. So with 2 boxes the localstorage looks like this:

The value ‘icon’ is its background-image of each box.

My question is: on refresh or open, what is the best way to check if id exists (such as ‘bm-item-1’, ‘bm-item-2’) and append the <li>‘s/boxes.

Shall I create a new key of which will store how many boxes exist? And how can I parse them once you visit the site?

Answer 1

i would use another way of storing you objects.

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
}

of course you need to change the way you store you’re data at this point. Append a new object into the result array and re-save it. Anway I think you know how to manage that 🙂

UPDATE

I’ve created a basic example for you http://jsfiddle.net/manuel/29gtu/

Note that you need to include JSON2 for IE support of the JSON object