如何在 Chrome 扩展程序中本地保存信息?

如果您正在开发一个 Chrome 扩展程序,有时您可能需要将信息保存到本地存储中。这可以用于保存用户首选项、历史记录等等。

使用 Chrome 存储 API

Chrome 扩展程序提供了一组 API 用于与本地存储进行交互。其中最常用的是 chrome.storage API。

存储数据

要将数据存储在本地存储中,您可以使用 chrome.storage.sync.set 方法。下面是一个示例:

------------------------- ---- ----- -- ---------- -
  ----------------- --------
---

这将把键为 key 的值设置为 value。在回调函数中,您可以添加任何适当的逻辑,例如在保存后显示消息。

获取数据

要检索存储在本地存储中的数据,您可以使用 chrome.storage.sync.get 方法。下面是一个示例:

-------------------------------- ---------------- -
  ------------------ --------- -- - - ------------
---

这将返回存储在 key 中的值。

注意事项

请注意,存储在本地存储中的数据必须是 JSON 格式的。因此,如果您要存储非 JSON 对象(例如函数),则需要先将其转换为字符串。

另外,请注意同步存储和异步存储之间的区别。chrome.storage.sync 是同步存储,它可以同步在多个设备之间共享数据。chrome.storage.local 是异步存储,它只能在一个设备上使用并且不会自动同步到其他设备。

示例代码

以下是一个完整的示例,演示如何在 Chrome 扩展程序中保存和检索数据:

-- ----
------------------------- -------- ------ ------ -- ---------- -
  ----------------- --------
---

-- ----
------------------------------------ ---------------- -
  ------------------ --------- -- - - ----------------
---

在这个示例中,我们将 message 的值设置为 'Hello World',然后检索它并将其记录在控制台中。这应该输出以下内容:

---- -----
----- --------- -- ----- -----

总结

在 Chrome 扩展程序中使用本地存储可以帮助您轻松地存储和检索数据。使用 chrome.storage.syncchrome.storage.local API 可以方便地进行交互。但请记住,存储在本地存储中的数据必须是 JSON 格式的,并且您需要注意同步存储和异步存储之间的区别。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/26618