Javascript jQuery-本地存储排序字符串化对象顺序

我有一个对象

menuItems

，它是JSON字符串化的（其中包含3个对象），保存在localstorage中。它从服务器返回为

result

localStorage.setItem('menuItems', JSON.stringify(result));

menuItems

中的3个对象是：

{
    id: "1"
    item: "Apple",
    type: "fruit"
},
{
    id: "2"
    item: "Banana",
    type: "fruit"
},
{
    id: "3"
    item: "Carrot",
    type: "vegetable"
}

我从本地存储中获取

menuItms

，在其对象上循环，并以与上面相同的顺序获取下面的列表，这非常完美。不过我想对它们进行排序，并将新的顺序重新保存到localstorage，因此在循环它们时，我会在data-sort-id中输出每次迭代的索引

<ul class="sort-menu-items-list">
    <li data-sort-id="0">Apple is a fruit</li>
    <li data-sort-id="1">Banana is a fruit</li>
    <li data-sort-id="2">Carrot is a vegetable</li>
</ul>

如何将

menuItems

对象的新2,0,1排序顺序保存到本地存储中，以便在检索

menuItems

时以新顺序显示？我认为

数据排序id

应该会有所帮助，但不确定如何将新订单重新保存到本地存储。有什么想法吗

更新：

$('.sort-done').click(function(){
    var newSortIds = [];
    $('.sort-menu-items-list').find('li').each(function(){
       newSortIds.push($(this).data('sort-id'));
    });
    console.log(newSortIds); // ["2","0","1"]
});

我需要向上述代码添加什么才能使其在jQuery中工作

---

问题是：

下面的策略能解决您的问题吗

从服务器加载菜单项

向菜单项的每个项添加sort_key属性

在localstrage中保存菜单项

从localstrage加载菜单项

按排序键对菜单项进行排序

在HTML中呈现菜单项

（前端的用户排序）

根据用户排序结果，为菜单项的每个项重新编号sort_key属性

在localstrage中保存菜单项

您需要在重新编号并保存到localstrage时决定事件。例如，当用户单击排序按钮或当用户单击某些保存按钮时，等等

代码如下所示

function loadFromServer(){
    // This is mock code.
    return [
        {
            id: "1",
            item: "Apple",
            type: "fruit"
        },
        {
            id: "2",
            item: "Banana",
            type: "fruit"
        },
        {
            id: "3",
            item: "Carrot",
            type: "vegetable"
        }
    ];
}

function loadFromLocalstrage(){
    // This is mock code.
    return [
        {
            id: "2",
            item: "Banana",
            type: "fruit",
            sort_key: 2
        },
        {
            id: "3",
            item: "Carrot",
            type: "vegetable",
            sort_key: 3
        },
        {
            id: "1",
            item: "Apple",
            type: "fruit",
            sort_key: 1
        }
    ];
}

function addSortKeyAtt(items){
    for (var i = 0, len = items.length; i < len; i++){
        var item = items[i];
        item.sort_key = i;
    }
}

function sortByKey(items){
    return items.sort(function(a, b){
        return a.sort_key - b.sort_key;
    });
}

function userOperation(items){
    // This is mock code.
    var item0 = items[0],
        item1 = items[1],
        item2 = items[2];
    return [
        item2, item0, item1
    ];
}


// #1
var menuItems = loadFromServer();
// #2
addSortKeyAtt(menuItems);
// #3
// Save to localstrage.
// #4
menuItems = loadFromLocalstrage();
// #5
menuItems = sortByKey(menuItems);
// #6
// Render menuItems in HTML.
// #7
menuItems = userOperation(menuItems);
// #8
addSortKeyAtt(menuItems);
// #9
// Save to localstrage.

console.log(menuItems);

更新：

如果您不想使用下划线，可以非常轻松地编写find函数。代码应该是这样的

function find(array, iteratee){
    for(var i = 0, len = array.length; i < len; i++){
        var item = array[i];
        if (iteratee(item)){
                return item;
        }
    }
    return undefined;
}

函数查找（数组，迭代对象）{
对于（变量i=0，len=array.length；i

---

我希望这会对你有所帮助。

像这样的东西可能会有帮助

var=[{
id:“1”，
项目：“苹果”，
类型：“水果”
}, {
id:“2”，
项目：“香蕉”，
类型：“水果”
}, {
id:“3”，
物品：“胡萝卜”，
类型：“蔬菜”
}];
var sortorder=[2,0,1]；//从localStorage获取此信息
var i=0，
列表=document.querySelectorAll（“li”），
len=果实长度；
对于（i；i

此代码将为您提供所需的：

$('.sort-done').click(function(){
    var newSortIds = $.makeArray($('.sort-menu-items-list-sorted-unsaved > li').map(function(i, e) {
        return $(e).data('sort-id');
    }));
    var outputArray = $.makeArray($(menuItems).map(function(i, e) {
        return $(menuItems).filter(function(index, element) { 
           return parseInt(element.id) == parseInt(newSortIds[i]);
        })[0];
    }));
});

需要注意的一点是outputArray只是一个对象数组，与初始menuItems数组类似。我想你知道你将如何从中填充ul。如果你不告诉我

以下是我使用的一些函数的链接：

makeArray（）：

映射（）：

---

下面是经过编辑的JSFIDLE，它使用了我上面列出的函数，并在页面上显示了输出：

在持久化它之前您是否尝试过localStorage.removeItem（'menuItems'）？嗯，没有，但不确定这会有什么帮助。。数据排序id基本上是一个索引值，我在循环li时输出。我重新排列它们以获得重新排列的排序id列表（与菜单项无关）。我可以通过在每个li上循环，并将其排序id推送到一个新的数组

sortedID

，来创建一个新的id数组列表，但我不确定如何应用

sortedID

顺序，要匹配

menuItems

数组中的顺序，并使用新顺序重新保存

menuItems

。根据排序结果重新创建对象，然后在localStorage中覆盖

menuItems

，会不会太麻烦？@lucas，结果来自服务器，因此，我只想将排序id附加到它们，并按该顺序“重新保存”它们，因此，当我从本地存储中提取时，它是按新的顺序。。基于我上面的排序顺序，不确定如何执行（代码方式）。如果menuItems是一个数组，您可以在排序后循环li，将

数据排序id

s推到另一个数组，然后在页面上通过menuItems加载循环，并使用querySelectorAll和从数据排序id数组获得的索引将它们呈现给li。不知道是我说得很清楚，还是你们需要一个代码示例？这正是我想做的，但不知道如何在代码中做到这一点。如何操作#2，在每个项目中添加一个排序键。以及在输出它们时如何按它们排序？好的。稍后我将尝试编写示例代码来实现#2。我正试图将我的想法围绕它，这肯定是我试图实现的，但不确定如何将其集成到上面每个菜单项上的工作jquery循环中。我很抱歉在更新之前没有提到这一点。。我能够输出重新排列的菜单项的新排序顺序，如上面控制台中所示，但不能将其集成回本地存储以进行输出。。。感谢您到目前为止的努力，但是请告诉我您是否能够让它与我到目前为止在jquery中得到的东西一起工作..yazaki，我添加了一个小提琴，准备好了确切的问题。。问题是我的默认数组中没有sort_键。你能看一下吗？这是你想要的吗？单击“完成”按钮并检查您的浏览器控制台。对不起，我刚刚意识到我没有包括jquery，并试图利用它进行构建。不确定如何将代码集成到其中以返回按新顺序排序的整个对象。我能够输出重新排列的菜单项的新排序顺序，如上面控制台中所示，但不能将其重新集成到lo中

function find(array, iteratee){
    for(var i = 0, len = array.length; i < len; i++){
        var item = array[i];
        if (iteratee(item)){
                return item;
        }
    }
    return undefined;
}

$('.sort-done').click(function(){
    var newSortIds = $.makeArray($('.sort-menu-items-list-sorted-unsaved > li').map(function(i, e) {
        return $(e).data('sort-id');
    }));
    var outputArray = $.makeArray($(menuItems).map(function(i, e) {
        return $(menuItems).filter(function(index, element) { 
           return parseInt(element.id) == parseInt(newSortIds[i]);
        })[0];
    }));
});