javascript - 获取内容脚本本地存储值(value)的简单方法 [Chrome 扩展]

Question

我想要将一些数据存储在本地存储中以内容脚本页面。由于它不能直接使用，我通过 chrome.runtime.sendMessage 完成了它，但我有几个值，看起来像这样。

var username, apikey, openexchange, currency, locale;

chrome.runtime.sendMessage({method: "getLocalStorage", key: "username"}, function(response) {
  username = response.data;
});

chrome.runtime.sendMessage({method: "getLocalStorage", key: "apikey"}, function(response) {
  apikey = response.data;
});

chrome.runtime.sendMessage({method: "getLocalStorage", key: "openexchange"}, function(response) {
  openexchange = response.data;
});

chrome.runtime.sendMessage({method: "getLocalStorage", key: "currency"}, function(response) {
  currency = response.data;
});

chrome.runtime.sendMessage({method: "getLocalStorage", key: "locale"}, function(response) {
  locale = response.data;
});

当值增加时，这个列表会进一步扩展，有没有其他方法可以将所有值包装在一个函数中？

如有任何帮助，我们将不胜感激。

Answer 1

我将首先回答您的直接问题(出于教育目的)，然后提供更好的方法(根本不使用 localStorage)。

<小时/>

您是编写响应 getLocalStorage 方法的消息监听器的人。因此，您可以通过为每个请求发送多个值来使其更加通用。

示例:

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  switch(message.method) {
    // ...
    case "getLocalStorage":
      if(message.key) { // Single key provided
        sendResponse({data: localStorage[message.key]});
      }
      else if(message.keys) { // An array of keys requested
        var data = {};
        message.keys.forEach(function(key) {data[key] = localStorage[key];})
        sendResponse({data: data});
      }
      break;
    // ...
  }
});

所以现在你可以这样做:

chrome.runtime.sendMessage(
  {method: "getLocalStorage", keys: ["username", "apikey"]},
  function(response) {
    username = response.data.username;
    apikey = response.data.apikey;
  }
);

<小时/>

也就是说，您正在重新发明轮子。 Chrome 已经有一个存储 API(令人惊讶的是，chrome.storage)可以准确地解决这种情况:某种可用于扩展页面和内容脚本的持久存储。

添加“存储”权限后，您可以执行以下操作:

chrome.storage.local.get(key, function(data) {
  // Use data[key]
});

chrome.storage.local.get([key1, key2], function(data) {
  // Use data[key1], data[key2]
});

chrome.storage.local.get({key1: default1, key2: default2}, function(data) {
  // Use data[key1], data[key2], and defaults will be used if not yet in storage
});

chrome.storage.local.set({key1: value1, key2: value2});

• Full documentation .

• My recent answer关于 Chrome 存储 API。

• Overview of localStorage vs chrome.storage .