Safari WebKit 是苹果公司开发的 Web 渲染引擎，在最近的版本中增加了对新的 Storage Access API 的支持。本文将详细介绍这个 API 的用途，使用方法以及如何在前端开发中应用它。
什么是 Storage Access API？
Storage Access API 是一个新的浏览器 API，旨在提供一个安全的机制来访问跨站点存储（cross-site storage）。在之前，如果一个网站想要访问另一个域名下的 Cookie、localStorage 或 IndexedDB 等存储数据，必须通过用户手动操作或者特殊设置来完成。而现在，Storage Access API 可以使得网站之间共享用户的存储数据变得更加方便和可控。
如何使用 Storage Access API？
Storage Access API 需要两个步骤来进行：
- 调用 document.requestStorageAccess() 方法
这个方法用于请求访问其他域名下的存储资源。调用该方法后，浏览器会弹出一个对话框询问用户是否愿意授权。如果用户同意授权，则 API 将返回一个 Promise 对象。
async function requestAccess() {
try {
await document.requestStorageAccess();
console.log("Access granted");
} catch (err) {
console.error(err);
}
}- 使用 withCredentials 属性发送跨域请求
在获取授权后，可以使用 withCredentials 属性来发送跨域请求。这个属性告诉浏览器在请求中包含凭据信息（如 Cookie），以便服务器能够验证用户身份。
-- -------------------- ---- -------
----- -------- -------------------------- -
--- -
----- -------- - ----- --------------------------------- - ------------ --------- ---
----- ---- - ----- ----------------
------------------
- ----- ----- -
-------------------
-
-Storage Access API 的学习和指导意义
Storage Access API 提供了一种安全的机制来访问跨站点存储，使得网站之间共享用户数据更加方便和可控。对于前端开发人员来说，了解和掌握这个 API 可以帮助他们更好地管理用户数据，并提供更好的用户体验。
同时，在实际使用过程中，需要注意以下几点：
- 必须遵守同源策略，只能访问已经得到用户授权的域名下的存储数据；
- 用户授权信息只在当前会话中有效，如果用户关闭浏览器或重启电脑，则需要重新获取授权；
- 需要特殊注意安全问题，防止恶意网站访问用户的存储数据。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------ --- ---------------
-------
------
------- --------------------------------- ---------------
------- ------------------------------------------ ---- ---- ------- -------------
--------
----- -------- --------------- -
--- -
----- --------------------------------
------------------- ----------
- ----- ----- -
-------------------
-
-
----- -------- -------------------------- -
--- -
----- -------- - ----- --------------------------------- - ------------ --------- ---
----- ---- - ----- ----------------
------------------
- ----- ----- -
-------------------
-
-
---------
-------
-------在这个示例中，我们创建了两个按钮，分别用于请求访问其他域名下的存储资源和获取跨域数据。在点击第一个按钮后，会弹出一个对话框询问用户是否同意授权；如果用户
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6999
