时间戳

首页 > 解决方案 > 如何使用 Firefox 中的扩展存储关闭后仍然存在的数据

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

问题描述

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

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

然后我有一个对象 dataRetrieved{} 用于存储返回的browser.storage.local.get(null)返回一个 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" }

我期待两个输出是相同的。据我所知， .then 中的行应该只在承诺返回值后运行。然而，这里似乎并非如此。如何访问存储的值？

参考： 存储的MDN

来自 MDN Github第 19,33 行的示例

MDN for StorageArea.get()

标签： javascriptlocal-storagees6-promisefirefox-addon-webextensions

解决方案

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

一旦它开始，如果你需要一个结果，Promise你必须等待它完成工作。

另请阅读我对以下内容的回答：理解承诺：需要结合多个结果

例如，在您的代码中

(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);

  });
});

推荐阅读