Question

我正在通过循环访问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>

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

Answer 2

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

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

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

<script>
$(function() {
    if (typeof localStorage === "undefined") {
        alert("Sorry, your browser does not support web storage...");
    }

    $.getJSON("data/header.json", function(data) {
        if ((localStorage.length === 0) || (localStorage.getItem("menu_items") != JSON.stringify(data))) {
            localStorage.setItem("menu_items", JSON.stringify(data));
        }
        loadMenu();
    });

    function loadMenu() {
        $('.horizontalmenu').empty();
        if (!localStorage.length < 1) {            
                var item = JSON.parse(localStorage.getItem("menu_items"));
                $.each(item.topmenu,function(key,val){
                     $('.horizontalmenu').append('<li class="menu"><a href="#">' + val.item + '</a></li>');
                });               
        } else {
             $('.horizontalmenu').html("<li class='menu'>No menu</li>");
        }
    }
});
</script>

Answer 3

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

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

3 个答案: