Question

我正在使用WebExtension编写Firefox扩展程序，该扩展程序将在窗口中打开的选项卡的数据存储并保存以供以后使用。它类似于MS Edge中的功能。为了存储持久数据，我正在使用storage.local API 但是，当我测试数据的存储和检索是否正常工作时，我在检索数据时遇到了麻烦。我可能还应该提到我是Promises的新手。

我有一个对象dataToStore {id，tabs []，numOfTabs，tags}发送给我，并使用browser.storage.local.set(dataToStore);

存储

然后我有一个对象dataRetrieved {}，该对象用于存储browser.storage.local.get(null)的返回值，该返回值将返回一个承诺

代码如下：


//At this state dataToStore has the necessary data inserted in it
console.log(dataToStore);
browser.storage.local.set(dataToStore);
let dataRetrieved={};
dataRetrieved = browser.storage.local.get(null).then(() => {
   console.log(dataRetrieved);
});

console.log(dataToStore);的输出是：

Object { id: 1563507620695, tabs: (3) […], numOfTabs: 3, tags: null }

这是预期的。但是console.log(dataRetrieved);的输出是：

Promise { <state>: "pending" }

我期望两个输出都相同。据我所知，.then中的行应该仅在promise返回值之后才运行。但是，这里似乎并非如此。如何访问存储的值？

参考： MDN for storage

Example of it from MDN Github第19,33行

MDN for StorageArea.get()

Answer 1

Promise是async函数，这意味着它将被放入队列中并按顺序完成。

一旦启动，如果您需要Promise的结果，就必须等待它完成工作。

还请阅读我对以下内容的回答：Understanding Promises: Need to combine multiple results

例如，在您的代码中

(async () => {

  console.log(dataToStore);
  await browser.storage.local.set(dataToStore); // wait for it to be done before going to the next line
  const dataRetrieved = await browser.storage.local.get(); // wait for it
  console.log(dataRetrieved);
})();

您也可以更改它们

console.log(dataToStore);
browser.storage.local.set(dataToStore).then(() => {
  // after it is done
  browser.storage.local.get().then((dataRetrieved) => {
    // after it is done
    console.log(dataRetrieved);

  });
});

如何使用Firefox中的扩展名存储关闭后仍然存在的数据

1 个答案: