从localStorage迁移到chrome.storage

Question

我正在迁移Chrome扩展程序的持久性存储库，从localStorage迁移到chrome.storage。它们之间的一个重要区别是chrome.storage是异步的，因此需要传递回调函数。

如何修改同步写入localStorage到异步chrome.storage的循环？

for (var i = 0; i < obj.length; i++) {
    localStorage.setItem(obj[i].key, obj[i].val);
}
doThisWhenAllElementsAreSaved();

感谢。

Answer 1

您可以使用chrome.storage API一次保存多个项目，因此我会使用以下方法：

之前，使用localStorage.setItem

for (var i = 0; i < obj.length; i++) {
    localStorage.setItem(obj[i].key, obj[i].val);
}
doThisWhenAllElementsAreSaved();

之后，使用chrome.storage.local.set

var items = {};
for (var i = 0; i < obj.length; i++) {
    items[obj[i].key] = obj[i].val;
}
chrome.storage.local.set(items, function() {
    doThisWhenAllElementsAreSaved();
});

如果您需要知道保存操作是否成功，请检查回调中chrome.runtime.lastError的值。

Answer 2

对于此示例，我将使用chrome.storage.local，但如果您愿意，可以将其替换为chrome.storage.sync。

目标是使用chrome.storage.local.set。第一步是将obj转换为包含键/值对列表的对象：

var keyValue = {};
for (var i = 0; i < obj.length; i++) 
{
    keyValue[obj[i].key] = obj[i].val;
}

然后我们称之为实际方法：

chrome.storage.local.set(keyValue, function()
{     
   // Notify that we saved.
   doThisWhenAllElementsAreSaved();
});

或者，简单地说：

chrome.storage.local(keyValue, doThisWhenAllElementsAreSaved);

请注意，回调将在成功时以及失败时调用。如果存储失败，则会设置chrome.runtime.lastError。

Answer 3

最佳做法是将代码更改为使用chrome.storage.local，就像其他人所说的那样。

但有时，它变得非常混乱，你可能希望一些代码保持不变。

我尝试在打包的应用环境中使用高度合并window.localStorage的库（该库是angular-cached-resource），并且不想更改原始源代码。所以我设法制作了以下垫片：https://github.com/stewartpark/chrome-localStorage-shim

希望它有所帮助！快乐的黑客攻击。