Question

我正在开发一个Chrome扩展程序，用不同的单词取代网站上的文字。我允许用户输入他们想要替换的单词，我将这些保存为：

function storeOptions(){
var words = new Object(); // storageArea.set() method takes an object that contains all the items to be stored. This Object contains those.
$("option").each(function(key,value){ // .each(index, element)
 words[value.id] = value.text;
 chrome.storage.sync.set(words, function(){console.log("Stored: "+value.text);});
});
}

在实施此功能之前，我使用类似方式使用存储在同一存储区中的设置的浏览功能成功启用和禁用了扩展程序：

chrome.storage.sync.set({"status":"enabled"});

我面临的问题是，在实现添加单词的选项后，状态要么未正确存储，要么受选项影响，因为当我尝试检索它时，它没有“启用”的值“或”禁用“如下所示：

chrome.storage.sync.get("status", function(result) {
  console.log("status: "+result["status"]); // status: status
});

我在想，也许我可以将这些单词存储为一个像以下方式调用的数组：

chrome.storage.sync.set({"words" : words});

然后我可以通过获得“状态”或“单词”来区分这两者，但这不起作用。

如何存储状态和单词而不会相互干扰？

Answer 1

您描述的内容的唯一原因是，如果<option>元素的标识为status且值为status（在这种情况下，它会覆盖原始状态）。

在任何情况下，（如你所建议的）将所有与选项相关的键值对“封装”在存储内的对象（不一定是数组）中是个好主意。

（最后，不需要逐个存储值。首先创建整个对象然后通过一次调用chrome.storage.sync.set()来存储它会更有效。）

function storeOptions() {
  const words = {};
  $('option').each((idx, element) => words[element.id] = element.text);

  chrome.storage.sync.set({words: words});
}

现在你的storage.sync看起来像这样：

{
  "status": "enabled",
  "words": {
    "option_id1": "option_text1",
    "option_id2": "option_text2",
    ...
  }
}

您可以检索如下值：

// Retrieve the extension status:
chrome.storage.sync.get('status', items => {
  const status = items.status;
  ...
});

// Retrieve the words:
chrome.storage.sync.get('words', items => {
  const words = items.words;
  Object.keys(words).forEach(key => {
    console.log(`Replacing '${key}' with '${words[key]}'...`);
    ...
  });
});

Answer 2

我不确定chrome存储，但是html5存储API，localstorage和sessionstorage都用于存储键和值，而不是键和对象。

您需要对单词对象进行字符串化，以便将其存储为值。

如何为Chrome扩展程序存储多个选项？

2 个答案: