Как сохранить несколько объектов в хранилище в Chrome Extentions?

Question

После каждого щелчка на странице я получаю следующий объект с другим time.

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

Итак, как я могу сохранить этот объект в местной памяти Google Chrome, что после того, как я могу взять все строки, отсортированные по time или total?

Как я знаю, что Chrome Storage позволяет хранить только key => value

Answer 1

Вы правы, что Local Storage является магазин ключ/значение. Однако значение может быть любым, что вы хотите. Прямо сейчас у вас есть простой литерал объекта.

Одним из вариантов было бы хранить массив этих объектов как один элемент в локальном хранилище. Вам необходимо обновить существующий массив для каждого события клика и нажать обновленную версию.

В расширениях Chrome вместо стандартного API используется API chrome.storage, так как он требует разного охвата. Он очень похож, но он асинхронный, и он предоставляет некоторые дополнительные функции для расширений.

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, чтобы узнать, как он работает и будет ли он применим для масштаба вашего приложения.

Лично, если вы обнаружите, что Local Storage работает достаточно хорошо, идите с этим. Это простой API, и вы можете найти, что кривая обучения для IndexedDB перевешивает преимущество над локальным хранилищем.