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

问题描述

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

I am tying read a json file by looping through the topmenu (array of objects) and get item out it and store it into localstorage. everything works fine and even the data gets stored in localstorage. But my problem is it stores the data in localStorage in a sorted order which might be its default behavior. But I dont need it in sorted order, I want it in the order which it is present in the json. Because when I store the data to localstorage and read the data from localstorage it comes in the sorted order. I can use the key in the $.each and append it to maintain our order if it automatically sorts. But why is it sorting itself. Is there any other work-around. Please help me solving this.

注意：

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

NOTE:
I need to store the data to localStorage from json. Then read it from localstorage and donot read the json till the localstorage is completely empty. When I manually change the values in localstorage it should reflect in the menu. I have done all the conditional coding just need to figure out the localstorage problem, which is storing it in sorting order.

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


JSON

Below is my JSON file, javascript and partial 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>

推荐答案

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

Store the JSON itself. localStorage acts like an object which doesn't have order.

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

然后你可以使用 JSON.parse（）来获取JSON并解析它方法。

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

However, I'm not sure why are you are storing the items, why not passing the data to your loadMenu function?

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>");
    }
}

这篇关于如何按照我们设置的顺序从localstorage中检索数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！