在前端开发中，当我们需要在不同的浏览器标签或窗口之间共享数据时，Chrome 提供了一种方便的解决方案：Chrome.storage.sync。该 API 可以让您将数据存储在用户使用 Chrome 浏览器登录的所有设备上，并且可以使用简单的键值对方式访问这些数据。
保存和检索数据
首先，我们需要在项目中添加 chrome.storage 权限，如下所示：
{ "name": "my-extension", ... "permissions": [ "storage" ], ... }
然后，我们可以使用 chrome.storage.sync.set 方法来将数据保存到 Chrome.storage 中。例如，以下代码将 myKey 键的值设置为 "myValue"。
chrome.storage.sync.set({ myKey: "myValue" }, function() { console.log("Data is saved to Chrome.storage."); });
我们也可以使用 chrome.storage.sync.get 方法从 Chrome.storage 中检索数据。例如，以下代码将返回 myKey 键的值。
chrome.storage.sync.get(["myKey"], function(result) { console.log("Data retrieved from Chrome.storage: ", result.myKey); });
此外，您还可以使用 chrome.storage.sync.remove 方法删除指定的键值对。例如，以下代码将删除 myKey 键和其对应的值。
chrome.storage.sync.remove("myKey", function() { console.log("Data is removed from Chrome.storage."); });
示例代码
下面是一个简单的示例，它将用户在文本框中输入的值保存到 Chrome.storage 中，并在页面重新加载时检索该值。
-- -------------------- ---- ------- --------- ----- ------ ------ -------------------------- ---------- ------- ------ ------ ----------- ------------ -- ------- ------------------------ -------- ----- ----- - ----------------------------------- ----- ------- - ----------------------------------- --------------------------------- ---------- - ----- ----- - ------------ ------------------------- ------ ----- -- ---------- - ----------------- -- ----- -- ------------------ --- --- ---------------------------------- ---------------- - -- -------------- - ----------- - ------------- ----------------- --------- ---- --------------- -- -------------- - --- --------- ------- -------展开代码
总结
使用 chrome.storage.sync API 可以方便地在不同设备和浏览器窗口之间共享数据。在存储和检索数据时，请确保您已经添加了 storage 权限，并根据需要使用 set、get 和 remove 方法来操作数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29596
