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

Question

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

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

进行存储

然后我有一个对象 dataRetrieved{}，它用于存储 browser.storage.local.get(null) 的 return，return 是一个 Promise

代码如下：


//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" }

我原以为两个输出是一样的。据我所知，只有在 promise 具有 returned 值之后， .then 中的行才应该运行。然而，这里似乎并非如此。如何访问储值？

参考： 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 中使用扩展存储关闭后仍然存在的数据

How to store data that persists after close using an extension in Firefox

javascript

local-storage

es6-promise

firefox-addon-webextensions