HTML5 localStorage key order

I have some div's on my page coded as

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

Now on click of any of the div's, an AJAX call is made which returns the dynamic List as;

<li>Some content 1</li>
<li>Some content 2</li>
<li>Some content 3</li>

I want to store the above dynamic List in localStorage, after the 1st AJAX call. So I write;

var key = $(selectedDiv).attr('id');     
var value = str;     //str = Returned AJAX response of li's
localStorage.setItem(key, value);

Now on the next page load, I want to append all the dynamicList's (all those which user had clicked earlier) at the right place in the DOM (So an AJAX call is not made for the data during next click)

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);
    }
}

Now there seems to be some issue in the order of the localStorage, as the right dynamicList is not getting appended at the right place. I guess there is some issue for the line

var key = localStorage.key(i);

Please let me know how do I fix this.

Answers


Don't rely on the order of localStorage keys. You can iterate through all available keys on localStorage using localStorage[n], but that refers to a key (string) which can be used with localStorage[str_key] or localStorage.getItem(str_key).

In your case, you've confused the index of the localStorage key names with the name you assigned to the item. Therefore, don't use the key index, but your value key:

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);
    }
}

Need Your Help

Refering to Javascript “Class” method from jQuery function

javascript jquery object this prototype-programming

How to I refer to a parent "class" method in Javascript from a jQuery function? Example:

Run javascript code on page load (twitter-bootstrap popup)

javascript .net twitter-bootstrap popup

I wrote some code using twitter-Bootstrap and .net to show a popup when you press the button. Here is my code piece:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.