jquery - 如何按照我们设置的顺序从本地存储中检索数据

Question

我通过遍历顶部菜单(对象数组)来读取一个 json 文件，然后从中取出项目并将其存储到本地存储中。一切正常，甚至数据都存储在本地存储中。但我的问题是它按排序顺序将数据存储在 localStorage 中，这可能是它的默认行为。但我不需要它按排序顺序排列，我希望它按照它在 json 中的顺序排列。因为当我将数据存储到 localstorage 并从 localstorage 读取数据时，它是按排序顺序出现的。如果它自动排序，我可以使用 $.each 中的键并附加它来维护我们的订单。但是为什么它会自己排序。有没有其他解决方法。请帮我解决这个问题。

注意:
我需要将数据从 json 存储到 localStorage。然后从 localstorage 读取它，直到 localstorage 完全为空才读取 json。当我手动更改 localstorage 中的值时，它应该反射(reflect)在菜单中。我已经完成了所有条件编码，只需要弄清楚本地存储问题，即按排序顺序存储它。

下面是我的 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>

Answer 1

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

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

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

但是，我不确定您为什么要存储这些项目，为什么不将数据传递给您的 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('<li class="menu"><a href="#">' + item + '</a></li>');
        }
    } else {
        $('.horizontalmenu').html("<li class='menu'>No menu</li>");
    }
}