HTML5 localStorage ключевой порядок

Question

У меня есть несколько 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>

Я хочу сохранить указанный выше динамический список в localStorage после первого вызова AJAX. Поэтому я пишу;

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, так как правильный динамический список не добавляется в нужном месте. Я думаю, что есть какая-то проблема для линии

var key = localStorage.key(i);

Пожалуйста, дайте мне знать, как мне это исправить.

Answer 1

Не полагайтесь на порядок localStorage ключей. Вы можете перебрать все доступные ключи на localStorage, используя localStorage[n], но это относится к ключу (строке), который можно использовать с 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);
    }
}

Answer 2

Сделать отдельный объект в localStorage до:

• Избегайте загрязнения пространства хранения (если вы просто заполните корневой узел, вам будет сложно добавить дополнительные функции позже)
• Получить сортировку обратно: -)

localStorage.specificStorage = {}; // Maybe even []