在本地存儲如何數值排序嵌套鍵

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/