如何在Chrome扩展程序中保存不同页面的不同设置？

Question

我创建了一个chrome扩展程序，其中包含一个弹出窗口，用户可以选择并保存不同的设置。我将这些设置保存到localStorage中，localStorage在所有选项卡中共享。我希望用户能够为不同的网页保存不同的设置。

这就是我想要的工作：

1. 用户可以转到站点1并保存设置A
2. 然后，用户可以转到站点2并保存设置B
3. 每当用户返回站点1时，设置A处于活动状态（并以弹出形式显示）
4. 每当用户返回站点2时，设置B处于活动状态（并以弹出窗口显示）

截至目前，每当用户更改任何页面上的设置时，这些设置都会在所有页面上生效。

我已经从浏览器操作转到了页面操作，但由于我将设置保存到同一个localStorage中，因此没有任何区别。

我唯一的想法是将url作为键保存到localStorage中，并将所有设置保存为值。有更清洁的方法吗？

谢谢！

Answer 1

您可以使用站点根目录为现有密钥添加前缀，而不是将所有首选项转储到单个密钥中。

Answer 2

至少有两种解决方案。

第一个问题在你自己的问题以及Zig Mandel的答案中都有所暗示。是的，您可以拥有在URL /主机名索引的对象中的首选项，例如[hostname].option或有多个密钥，但前缀是它，例如[hostname+".option1"]。

如果你选择这条路线，特别是第一个版本，我强烈建议您从localStorage切换到chrome.storage.local API。它为您自动序列化值。如果您不喜欢它是异步的这一事实，您可以为其创建一个特定于页面的缓存，该缓存将加载一次并隐藏chrome.storage的异步性质。

第二种解决方案是重击手，但可能更容易使用;它是以IndexedDB。

的形式使用一个完整的数据库