如何在Chrome Extentions中將多個對象保存在存儲中？

Question

在每次點擊頁面後，我會得到以下對象，其中有不同的time。

var obj = {"time" : "23:10", "total" : 3, "priory" : "1"} 

所以，我怎麼能保存在本地存儲谷歌瀏覽器這個對象，後，我可以通過time，或total排序的所有行？

據我所知鉻儲存可以儲存只key => value

Answer 1

你是正確的本地存儲是一個鍵/值存儲。但是，價值可以是任何你想要的。現在你只需要一個簡單的對象文字。

一種選擇是將這些對象的數組作爲一個項目存儲在本地存儲中。您需要爲每個點擊事件更新現有陣列並推送更新後的版本。

在Chrome擴展中，使用chrome.storage API代替標準window.localStorage API，因爲它需要不同的作用域。它非常相似，但它是異步的，它爲擴展提供了一些額外的功能。

function updateLocalChromeStorage(key, obj) { 
    var myObjArray = []; 

    chrome.storage.local.get(key, function(result) { 
     if (result) { 
      myObjArray = result[key]; 
     } 

     myObjArray.push(obj); 

     chrome.storage.local.set({key: myObjArray}, function() { 
      console.log('Updated myObjArray in storage'); 
     }); 
    }); 
} 

// in your click handler, pass the newly constructed object to the update function 
button.onclick = function() { 
    var now = new Date(); 
    var obj = {"time" : now.getHours() + ':' + now.getMinutes(), "total" : 3, "priory" : "1"}; 
    updateLocalChromeStorage('myObjArray', obj); 
} 

然後，您可以對數組進行排序，當你終於需要它：

function getSortedObjArray(key, sort) { 
    var myObjArray = []; 

    chrome.storage.local.get(key, function(result) { 
     console.log('Received myObjArray from storage'); 
     myObjArray = result[key]; 
     sort(myObjArray); 
    }); 
} 

getSortedObjArray('myObjArray', function(myObjArray) { 
    var mySortedObjArray = myObjArray.slice().sort(function(first, second) { 
     return first.total - second.total; 
    }); 

    // do something with the sorted array. 
}); 

這將整理基於total，上升和返回數組。您可能想知道爲什麼我在排序前使用slice()。原因是本地的sort函數會改變數組，而不是返回一個新的數組（即它不是純的）。解決方法是使用slice()，它返回一個新的數組。在ES6中，您可以使用傳播運算符來實現相同的目的。

IndexedDB是另一種可能更適合存儲大量結構化數據的解決方案。我之前沒有使用它，但是您可以閱讀Using IndexedDB以瞭解它的工作原理，以及它是否適用於您的應用程序的規模。

就個人而言，如果您發現本地存儲性能足夠好，那就去吧。這是一個簡單的API，您可能會發現IndexedDB的學習曲線超過了本地存儲的優勢。