在本地存储如何数值排序嵌套键

Question

的问题

我一直在试图找出如何通过其密钥，其毫秒我的本地存储对象进行排序。

示例代码

// function that saves to local storage 
function saveObjectToLocalStorage(key, object) { 
    object = JSON.stringify(object); 
    window.localStorage.setItem(key, object); 
} 
// function that gets from local storage 
function getObjectFromLocalStorage(key) { 
    var saved = window.localStorage.getItem(key); 
    if (saved) { 
     return JSON.parse(saved); 
    } else { 
     return null; 
    } 
} 

// custom function to get milliseconds since epoch 
var getId = getMillis(); 
// retrieve the existing object from local storage 
var fruitEntry = getObjectFromLocalStorage('fruitHistory'); 
// then add to it 
fruitEntry[getId] = { 
    fruit: 'banana', 
    weight: '100', 
}; 
// and save it back 
saveObjectToLocalStorage('fruitHistory', fruitEntry); 

所以本地存储现在看起来是这样

fruitHistory "{ 
    "1111111111111":{"fruit":"banana","weight":"100"}, 
    "1333333333333":{"fruit":"papaya","weight":"300"}, 
    "1222222222222":{"fruit":"tomato","weight":"200"} 
}" 

我想要做什么，

现在我希望能够将这些条目进行排序基于它们的密钥（id /毫秒），以便我可以按照日期和后续输出的顺序保存它们时间顺序倒序。

我已经试过

我至今无法修改basic examples为我嵌套密钥存储的工作作风。

无法修改Jeremy's answer重新包装我的对象并将其保存回本地存储。这是一两件事至今我试着用他的ES5的例子..

// get my local storage object 
var fruitHistory = getObjectFromLocalStorage('fruitHistory'); 
// create an empty array to add to? 
var keysToSort = []; 
// is this converting my object to an array? or just extracting the keys to be sorted? 
for (var key in fruitHistory) { 
    // 
    if (fruitHistory.hasOwnProperty(key)) { 
     // i have to learn more about push but does this translate just the key to the array, or does it pair the values with the keys? 
     keysToSort.push(key); 
    } 
} 
// this seems to sort the keys just fine 
keysToSort.sort(); // Sort as strings. 

// this console logging works fine at showing the above sort worked 
// i don't understand how it re-pairs the values with the keys 
// my attempts at re-upping the object to local storage have saved only the keys with no values attached 
// so i havent been able to figure out how to rebuild it back to an object.. 
// ..so i can re-rup it to local storage 
for (var i = 0; i < keysToSort.length; i++) { 
    console.log(fruitHistory[keysToSort[i]]); 
} 

Answer 1

对象键是从来没有在一个特定的顺序，这样你就可以排序你有什么不完全是。

你需要做的是首先提取键，然后对它们进行排序。

var fruitHistory = { 
 
    "1111111111111": { 
 
    "fruit": "banana", 
 
    "weight": "100" 
 
    }, 
 
    "1333333333333": { 
 
    "fruit": "papaya", 
 
    "weight": "300" 
 
    }, 
 
    "1222222222222": { 
 
    "fruit": "tomato", 
 
    "weight": "200" 
 
    } 
 
}; 
 

 
// ES6 
 
var keys6 = Object.keys(fruitHistory); 
 

 
// ES5 
 
var keys5 = []; 
 
for (var key in fruitHistory) { 
 
    if (fruitHistory.hasOwnProperty(key)) { 
 

 
    keys5.push(key); 
 
    } 
 
} 
 

 
console.log(keys5); 
 
console.log(keys6); 
 

 
// Once you have the keys, you can proceed either way. 
 

 
keys5.sort(); // Sort as strings. 
 

 
// ES5 
 
for (var i = 0; i < keys5.length; i++) { 
 
    console.log(fruitHistory[keys5[i]]); 
 
} 
 

 
// ES6 
 
keys6.forEach((key) => { 
 
    console.log(fruitHistory[key]); 
 
});

Answer 2

基于杰里米的答案排序这里是我想出了排序后重新保存分类信息的本地存储。

// get our local storage info as object 
    var fruitObject = getObjectFromLocalStorage('fruitHistory'); 
    // create an array 
    var keysToSort = []; 
    // convert object to array? or just adding keys without values? 
    for (var key in fruitObject) { 
    if (fruitObject.hasOwnProperty(key)) { 
     keysToSort.push(key); 
    } // end if 
    } // end for 
    // sort keys (root keys of each entry which are milliseconds based on entry date) 
    // so we're sorting numerically 
    keysToSort.sort(); 
    // create a temporary container to output info to 
    $('body').append('<div class="resave-tester-container"></div>'); 
    // output each object value to holding container (as ordered by sort) 
    for (var i = 0; i < keysToSort.length; i++) { 
     $('.resave-tester-container').append(
      '<div class="fruit-entry resave-tester-item" id="' + (fruitObject[keysToSort[i]].id) + '">' + 
     '<div class="id">' + (fruitObject[keysToSort[i]].id) +'</div>' + 
       '<div class="date">' + (fruitObject[keysToSort[i]].date) +'</div>' + 
       '<div class="fruit">' + (fruitObject[keysToSort[i]].fruit) + '</div>' + 
       '<div class="weight">' + (fruitObject[keysToSort[i]].weight) + '</div>' + 
      '</div>' 
     ); 
    } // end for 
    // delete current local storage object (we will rebuild it based on new dom order) 
    window.localStorage.removeItem('fruitHistory'); 
    // recreate object 
    var rebuiltHistory = {}; 
    // name it and save it to local storage 
    saveObjectToLocalStorage('fruitHistory', rebuiltHistory); 
    // recall it 
    var rebuiltHistory = getObjectFromLocalStorage('fruitHistory'); 
    $('.resave-tester-item').each(function(index) { 
     // create variables based on current element 
     var getId = $(this).attr('id'); 
     var getDate = $(this).find('.date').html(); 
     var getFruit = $(this).find('.fruit').html(); 
     var getWeight = $(this).find('.weight').html(); 
     // add to object 
     rebuiltHistory[getId] = { 
     id: getId, 
     date: getDate, 
     fruit: getFruit, 
     weight: getWeight, 
     }; 
     // save each object item until loop complete 
     saveObjectToLocalStorage('fruitHistory', rebuiltHistory); 
    }); 
    /* remove temporary holding container */ 
    $('.resave-tester-container').remove(); 

下面是一个例子小提琴

https://jsfiddle.net/Hastig/acve955m/