jquery – 如何按照我们设置的顺序从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

<script>
$(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('<li class="menu"><a href="#">' + item + '</a></li>');
            }
        } else {
            $('.horizontalmenu').html("<li class='menu'>No menu</li>");
        }
    }
});
</script>

部分HTML

<div id="header">
        <div id="header-title">
        Test
        </div>
        <div id="header-menu">
                <ul class="horizontalmenu">
                </ul>
        </div>
</div>

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

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('<li class="menu"><a href="#">' + item + '</a></li>');
        }
    } else {
        $('.horizontalmenu').html("<li class='menu'>No menu</li>");
    }
}