Question

我有一个对象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，以便始终以新的顺序检索它们：

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

如何将menuItems个对象的新的2个，0个，1个排序顺序保存到本地存储，所以当我检索menuItems时，它会以新的顺序出现？我认为data-sort-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中运行？

这是小提琴：http://jsfiddle.net/D2NtS/294/

Answer 1

这样的事情可能会有所帮助

＆＃13;

var fruits = [{
  id: "1",
  item: "Apple",
  type: "fruit"
}, {
  id: "2",
  item: "Banana",
  type: "fruit"
}, {
  id: "3",
  item: "Carrot",
  type: "vegetable"
}];

var sortorder = [2, 0, 1]; // get this from localStorage

var i = 0,
  list = document.querySelectorAll("li"),
  len = fruits.length;

for (i; i < len; i++) {
  var ord = sortorder[i];
  list[i].innerHTML = fruits[ord].item + " is a " + fruits[ord].type;
  list[i].setAttribute("data-sort-id", ord);
}

document.getElementById("btn").onclick = function() {
  var ord = [];
  var a = 0;

  for (a; a < len; a++) {
    ord.push(Number(list[a].getAttribute("data-sort-id")))
  }
  alert(JSON.stringify(ord)) // set this to localStorage
}

＆＃13;

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
<input type="button" id="btn" value="get order">

＆＃13;

Answer 2

此代码可为您提供所需内容：

$('.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（）：https://api.jquery.com/jQuery.makeArray/

map（）：http://api.jquery.com/jquery.map/

这是你的JSFiddle编辑使用我上面列出的功能，并在页面上显示输出：http://jsfiddle.net/D2NtS/298/

Answer 3

以下策略可以解决您的问题吗？

从服务器加载menuItems。
将sort_key属性添加到menuItems的每个项目。
将menuItems保存在localstrage中。
从localstrage加载menuItems。
按sort_key排序menuItems。
以HTML格式呈现menuItems。
（前端用户排序）
根据用户排序结果为每个menuItem项重新编号sort_key属性。
将menuItems保存在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);

更新：

如果要将其集成到jquery代码中，这对您有所帮助。虽然我写了这个样本，但我建议你尽可能地从管理DOM逻辑来管理模型数据逻辑。

var menuItems = [
    {
        id: "1",
        item: "Apple",
        type: "fruit",
        sort_key: 1
    },
    {
        id: "2",
        item: "Banana",
        type: "fruit",
        sort_key: 2
    },
    {
        id: "3",
        item: "Carrot",
        type: "vegetable",
        sort_key: 3
    }
];

$('.sort-done').click(function(){
    var newMenuItems = [];
    $('.sort-menu-items-list').find('li').each(function(i){
        var id = $(this).data('id');
        // To make code simple, I use underscorejs find function. You could implement the same code if you don't want use underscorejs.
        var item = _.find(menuItems, function(item){
            return item.id === id.toString();
        });
        item.sort_key = i + 1;
        newMenuItems.push(item);
    });
    console.log(newMenuItems);
});

jsfiddle is here.

更新：

如果您不想使用下划线，您可以非常轻松地编写查找功能。代码就是这样的。

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

jsfiddle is here.

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

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

3 个答案: