如何按照我们设置的顺序从localstorage中检索数据

我通过循环访问topmenu（对象数组）来读取一个json文件并获取它并将其存储到localstorage中。 一切正常，甚至数据都存储在localstorage中。 但我的问题是它以排序顺序将数据存储在localStorage中，这可能是它的默认行为。 但我不需要按排序顺序，我希望它按照它在json中出现的顺序。 因为当我将数据存储到localstorage并从localstorage读取数据时，它按排序顺序排列。 我可以使用$ .each中的密钥并附加它以维护我们的订单，如果它自动排序。 但为什么要自行排序。 有没有其他解决办法。 请帮我解决这个问题。

注意：
我需要从json将数据存储到localStorage。 然后从localstorage读取它并且不读取json直到localstorage完全为空。 当我手动更改localstorage中的值时，它应反映在菜单中。 我已经完成了所有的条件编码，只需要找出localstorage问题，即将其存储在排序顺序中。

下面是我的JSON文件，javascript和部分html：

JSON

{ "topmenu": [ { "item": "File" }, { "item": "Help" }, { "item": "Edit" }, { "item": "View" }, { "item": "Go" }, { "item": "Tools" }, { "item": "Actions" } ] } 

JAVASCRIPT

  $(function() { if (typeof localStorage === "undefined") { alert("Sorry, your browser does not support web storage..."); } $.getJSON("header.json", function(data) { $.each(data.topmenu, function(key, val) { localStorage.setItem(val.item, val.item); }); loadMenu(); }); function loadMenu() { $('.horizontalmenu').html(''); if (!localStorage.length < 1) { for (var i = 0; i < localStorage.length; i++) { var item = localStorage.getItem(localStorage.key(i)); $('.horizontalmenu').append('
' + item + '
'); } } else { $('.horizontalmenu').html("
No menu
"); } } });  

部分HTML

 
 
 Test 
 
 
 
 
  

Answer 1

存储JSON本身。 localStorage就像一个没有订单的对象。

 localStorage.setItem("menu_items", JSON.stringify(data)); 

然后你可以使用JSON.parse()方法获取JSON并解析它。

但是，我不确定您为什么要存储这些项目，为什么不将数据传递给loadMenu函数？

 loadMenu(data.topmenu); function loadMenu(elems) { // var elems = JSON.parse(localStorage.getItem("menu_items")).topmenu; $('.horizontalmenu').empty(); if (elems.length) { for (var i = 0; i < elems.length; i++) { var item = elems[i].item; $('.horizontalmenu').append('
' + item + '
'); } } else { $('.horizontalmenu').html("
No menu
"); } } 

Answer 2

最后得到了用户@BlackSheep的回答并基于它发布我的解决方案的想法。让我解释一下代码的行为：

我的代码实际检查localstorage是否为空或者它是否为空，然后检查它的值（localStorage值是json字符串）是否等于实际的json（转换为字符串）。 进行此检查以确保如果将新项目添加到json文件，它甚至应该在本地存储中更新它。 如果条件都失败，它什么都不做，并继续读取localStorage。

在加载菜单中，我只是从本地存储中读取值，这是json字符串，因此将其转换为和json对象并解析它以获取值。 看起来很复杂，但这是要求。 我可以通过解析json并在菜单中显示来直接完成。

Answer 3

为什么使用val.item作为键和值？ 如何将数字索引作为关键？ 然后在for循环中通过索引检索。