Question

每次点击页面后，我都会得到以下具有不同time的对象。

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

那么，我怎样才能将此对象保存在本地存储谷歌浏览器中，我可以按照time或total排序所有行？

据我所知，Chrome Storage只允许存储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中，您可以使用spread运算符来实现相同的功能。

IndexedDB是另一种可能更适合存储大量结构化数据的解决方案。我之前没有使用它，但您可以阅读Using IndexedDB以了解它是如何工作的，以及它是否适用于您应用的规模。

就个人而言，如果您发现本地存储的性能足够好，请继续使用。它是一个死的简单API，您可能会发现IndexedDB的学习曲线超过了本地存储的优势。

如何在Chrome Extentions中保存存储中的多个对象？

1 个答案: