Chrome 扩展的本地存储 - Javascript

如果你正在开发一个 Chrome 扩展，并且需要在客户端保存一些数据，那么你可以使用 Chrome 提供的本地存储 API。本地存储 API 允许扩展在 Chrome 浏览器本地存储数据，这样即使用户重新打开浏览器或重启计算机，也不会丢失这些数据。

获得本地存储权限

在使用本地存储 API 之前，你需要在扩展清单文件中添加权限。下面是一个示例：

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my extension",
  "permissions": [
    "storage"
  ],
  "browser_action": {
    "default_popup": "popup.html"
  }
}

上面的权限声明中，我们添加了 storage 权限，这可以让我们在扩展中使用本地存储 API。

使用本地存储 API

一旦获得了本地存储权限，在你的扩展中就可以使用 chrome.storage API 来读写本地存储数据了。下面是一个保存数据的示例：

chrome.storage.local.set({ "myKey": "myValue" }, function () {
  console.log("Data saved.");
});

上面的示例中，我们使用 chrome.storage.local.set() 方法保存了一个键值对对象 { "myKey": "myValue" }。回调函数中，我们输出了一个日志来确认保存数据操作已经完成。

类似的，我们也可以通过 chrome.storage.local.get() 方法来读取保存在本地存储中的数据：

chrome.storage.local.get("myKey", function (data) {
  console.log(data.myKey);
});

上面的示例中，我们使用 chrome.storage.local.get() 方法来获取 myKey 对应的值，通过回调函数中传递的 data 对象，可以获得保存在本地存储中的数据。

使用 Promise 来获取数据

如果你想使用 Promise 来获取本地存储数据，那么你可以使用 chrome.storage.local.get() 方法。下面是一个获取本地存储数据的示例：

function getStoredValue(key) {
  return new Promise(function(resolve, reject) {
    chrome.storage.local.get(key, function(result) {
      if (chrome.runtime.lastError) {
        reject(chrome.runtime.lastError);
      } else {
        resolve(result[key]);
      }
    });
  });
}

async function myFunction() {
  const myValue = await getStoredValue("myKey");
  console.log(myValue);
}

上面的示例中，我们首先定义了一个 getStoredValue() 函数，该函数返回一个 Promise 对象，通过回调函数中传递的 result 对象，可以获得保存在本地存储中的数据。

在 myFunction() 中，我们使用了关键字 async 来定义一个异步函数，并使用 await 来等待 getStoredValue() 函数返回数据，并将其存储在 myValue 变量中。最后，我们输出保存在本地存储中的数据，这里是 myValue。