Storage Access API

存储访问API提供了一种方式，允许以第三方上下文（即嵌入在 </code> 中）加载的跨站点内容访问通常只能在第一方上下文（即直接加载到浏览器标签页中）才能访问的第三方Cookie和未分区状态。</p> <p>存储访问API与默认阻止访问第三方Cookie和未分区状态以提高隐私（例如，防止跟踪）的用户代理相关。即使在这些默认限制存在的情况下，我们仍然希望启用第三方Cookie和未分区状态的合法用途。示例包括与联邦身份提供商 (IdP) 的单点登录 (SSO)，或者在不同站点之间持久化用户详细信息（如位置数据或查看偏好）。</p> <p>该API提供了方法，允许嵌入式资源检查它们当前是否具有第三方Cookie访问权限，如果否，则向用户代理请求访问权限。</p> </section> </div> <aside class="reference-layout__toc"> <nav class="reference-toc"> <h2>本文内容</h2> <ul> <li><a href="#concepts_and_usage">概念与用法</a></li><li><a href="#security_measures">安全措施</a></li><li><a href="#browser-specific_variations">浏览器特定差异</a></li><li><a href="#examples">示例</a></li><li><a href="#api_methods">API方法</a></li><li><a href="#specifications">规范</a></li><li><a href="#browser_compatibility">浏览器兼容性</a></li><li><a href="#see_also">另见</a></li> </ul> </nav> <mdn-placement-sidebar></mdn-placement-sidebar> </aside> <div class="reference-layout__body"> <section class="content-section" aria-labelledby="concepts_and_usage"> <h2 id="concepts_and_usage" class="heading"><a class="heading-anchor" href="#concepts_and_usage">概念与用法</a></h2> <p>浏览器实现了多种存储访问功能和策略，限制了对第三方Cookie和未分区状态的访问。这些功能从为每个顶级源下的嵌入式资源提供唯一的Cookie存储空间（分区Cookie）到在第三方上下文中加载资源时完全阻止Cookie访问。</p> <p>第三方Cookie和未分区状态阻止功能和策略的语义因浏览器而异，但核心功能相似。嵌入在第三方上下文中的跨站点资源无法访问它们在第一方上下文中可以访问的相同状态。这样做是出于善意——浏览器供应商希望采取措施更好地保护用户的隐私和安全。例如，减少用户在不同站点上的活动被跟踪的可能性，并降低受到跨站请求伪造（CSRF）等漏洞攻击的风险。</p> <p>然而，嵌入式跨站点内容访问第三方Cookie和未分区状态存在合法用途，而上述功能和策略已知会破坏这些用途。假设您有一系列提供不同产品的网站——<code>heads-example.com</code>、<code>shoulders-example.com</code>、<code>knees-example.com</code>和<code>toes-example.com</code>。</p> <p>或者，您可能会出于本地化目的将内容或服务分离到不同的国家/地区域——<code>example.com</code>、<code>example.ua</code>、<code>example.br</code>等——或以其他方式进行分离。</p> <p>您可能拥有伴随的实用工具站点，其中包含嵌入在所有其他站点中的组件，例如，用于提供SSO（<code>sso-example.com</code>）或通用个性化服务（<code>services-example.com</code>）。这些实用工具站点将希望通过Cookie与它们嵌入的站点共享其状态。它们无法共享第一方Cookie，因为它们位于不同的域中，而第三方Cookie在阻止它们的浏览器中将不再起作用。</p> <p>在这种情况下，站点所有者通常会鼓励用户将他们的站点添加为例外，或完全禁用第三方Cookie阻止策略。希望继续与其内容交互的用户必须显著放宽对所有嵌入式源以及可能所有网站加载资源的阻止策略。</p> <p>存储访问API旨在解决此问题；嵌入式跨站点内容可以通过 <code>Document.requestStorageAccess()</code> 方法逐帧请求对第三方Cookie和未分区状态的无限制访问。它还可以通过 <code>Document.hasStorageAccess()</code> 方法检查是否已拥有访问权限。</p> </section><section class="content-section" aria-labelledby="unpartitioned_versus_partitioned_cookies"> <h3 id="unpartitioned_versus_partitioned_cookies" class="heading"><a class="heading-anchor" href="#unpartitioned_versus_partitioned_cookies">未分区与分区Cookie</a></h3> <p>值得注意的是，存储访问API仅需要提供对“未分区”第三方Cookie的访问。这意味着自早期Web以来以传统方式存储的Cookie——所有在同一站点上设置的Cookie都存储在同一个Cookie罐中。这与“分区”Cookie形成对比，后者为每个顶级站点下的嵌入式资源提供唯一的Cookie存储空间，从而使得通过这些Cookie跨站点跟踪用户成为不可能。</p> <p>浏览器具有各种机制来分区第三方Cookie访问，例如 Firefox Total Cookie Protection 和具有独立分区状态的Cookie（CHIPS）。</p> <p>当我们在存储访问API的上下文中谈论第三方Cookie时，我们隐含地指的是“未分区”第三方Cookie。</p> </section><section class="content-section" aria-labelledby="how_it_works"> <h3 id="how_it_works" class="heading"><a class="heading-anchor" href="#how_it_works">工作原理</a></h3> <p>合法需要第三方Cookie或未分区状态访问的嵌入式内容可以使用存储访问API请求访问，具体如下：</p> <ol> <li>它可以调用 <code>Document.hasStorageAccess()</code> 方法来检查它是否已经拥有所需的访问权限。</li> <li>如果否，它可以通过 <code>Document.requestStorageAccess()</code> 方法请求访问。</li> <li>根据浏览器的不同，用户会被以略微不同的方式询问是否授予请求嵌入的访问权限。<ul> <li>Safari 会向所有之前未获得存储访问权限的嵌入式内容显示提示。</li> <li>Firefox 仅在某个源在超过阈值数量的站点上请求存储访问后才会提示用户。</li> <li>Chrome 会向所有之前未获得存储访问权限的嵌入式内容显示提示。但是，如果嵌入式内容和嵌入站点属于同一个相关网站集，它将自动授予访问权限并跳过提示。</li> </ul> </li> <li>访问的授予或拒绝基于内容是否满足所有安全要求——有关一般要求，请参阅安全措施；有关某些浏览器特定的安全要求，请参阅浏览器特定差异。<code>requestStorageAccess()</code> 基于 Promise 的特性允许您运行代码来处理成功和失败的情况。<ul> <li>现代规范行为规定访问权限是“逐帧”授予的——每个独立的内容嵌入默认都会阻止其第三方 Cookie 访问，并且需要调用 <code>requestStorageAccess()</code> 才能选择启用访问。如果某个内容嵌入已获得访问权限，并且同站嵌入随后调用 <code>requestStorageAccess()</code>，它们的 Promise 将自动履行。但它们仍然需要选择启用。</li> <li>“默认阻止”行为的唯一例外是当内容嵌入成功调用 <code>requestStorageAccess()</code> 后，然后执行同源导航（例如重新加载自身）。在这种情况下，存储访问权限会从之前的导航中继承。</li> <li>在旧的规范版本中，访问权限是“逐页”的（Safari 是目前唯一仍在使用此模型的浏览器）。当一个嵌入通过 <code>requestStorageAccess()</code> 获得第三方 Cookie 访问权限时，所有其他同站嵌入都会自动获得访问权限。从安全角度来看，这不是理想的行为——例如，如果 <code>shop.example.com</code> 嵌入了 <code>locator.users.com</code> 以允许用户在购物时使用他们的位置信息，并且 <code>locator.users.com</code> 调用了 <code>requestStorageAccess()</code>，那么 <code>shop.example.com</code> 及其嵌入的任何其他站点都将能够访问其 Cookie，但也会访问来自 <code>private.users.com</code> 的 Cookie，而后者并非旨在被嵌入。阅读有关此更改背后的动机的更多信息。</li> </ul> </li> <li>一旦授予访问权限，浏览器中会存储一个权限密钥，其结构为 <code><顶级站点, 嵌入站点></code>。例如，如果嵌入站点是 <code>embedder.com</code>，嵌入内容是 <code>locator.example.com</code>，则密钥将是 <code><embedder.com, example.com></code>。然后，同站嵌入（<code>docs.example.com</code>、<code>profile.example.com</code>等）将能够调用 <code>requestStorageAccess()</code>，并且Promise将自动实现，如前所述。<ul> <li>旧的规范版本使用了更具体的权限密钥结构 <code><顶级站点, 嵌入源></code>，这意味着同站、跨源嵌入不匹配权限密钥，必须单独经历整个过程。</li> </ul> </li> </ol> <div class="notecard note"> <p><strong>注意：</strong> 在顶级站点其 Cookie 被分区的情况下，存储访问API不是必需的，因为默认共享 Cookie 没有隐私风险。</p> </div> </section><section class="content-section" aria-labelledby="security_measures"> <h2 id="security_measures" class="heading"><a class="heading-anchor" href="#security_measures">安全措施</a></h2> <p>有几个不同的安全措施可能导致 <code>Document.requestStorageAccess()</code> 调用失败。如果您在尝试使请求正常工作时遇到问题，请检查以下列表：</p> <ol> <li> <p>该调用必须与用户手势（瞬态激活）相关联，例如轻触或点击。这可以防止页面上的嵌入内容用过多的访问请求来骚扰浏览器或用户。请注意，在以下情况下不需要这样做：</p> <ul> <li>已授予使用 API 的权限，例如通过另一个同站资源调用 <code>requestStorageAccess()</code>。</li> <li>调用方是顶级文档或与顶级文档同站。在这种情况下，可能根本不需要调用 <code>requestStorageAccess()</code>。</li> </ul> </li> <li> <p>文档和顶级文档的源不能为 <code>null</code>。</p> </li> <li> <p>从未作为第一方交互过的源没有第一方存储的概念。从用户的角度来看，他们与该源只有第三方关系。如果浏览器检测到用户最近没有在第一方上下文中与嵌入内容交互（在 Firefox 中，“最近”指30天内），则访问请求将自动被拒绝。</p> </li> <li> <p>文档的窗口必须是一个安全上下文。</p> </li> <li> <p>由于安全原因，默认情况下，沙盒化 <code><iframe></code> 无法获得存储访问权限。因此，API 还添加了 <code>allow-storage-access-by-user-activation</code> 沙盒令牌。嵌入网站需要添加此令牌，以及 <code>allow-scripts</code> 和 <code>allow-same-origin</code>，以允许执行脚本来调用 API 并在可以拥有 cookie/状态的源中执行它，才能使存储访问请求成功。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><iframe sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin"> … </iframe> </code></pre></div> </li> <li> <p>此功能的使用可能会被服务器上设置的 <code>storage-access</code> 权限策略阻止。</p> </li> </ol> <div class="notecard note"> <p><strong>注意：</strong> 文档可能还需要通过额外的浏览器特定检查。例如：允许列表、阻止列表、设备端分类、用户设置、反点击劫持启发式方法，或提示用户明确许可。</p> </div> </section><section class="content-section" aria-labelledby="browser-specific_variations"> <h2 id="browser-specific_variations" class="heading"><a class="heading-anchor" href="#browser-specific_variations">浏览器特定差异</a></h2> <p>尽管 API 接口相同，但由于存储访问策略的差异，使用存储访问 API 的网站应预期在不同浏览器之间获得的第三方 Cookie 访问级别和范围会有所不同。</p> </section><section class="content-section" aria-labelledby="chrome"> <h3 id="chrome" class="heading"><a class="heading-anchor" href="#chrome">Chrome</a></h3> <ul> <li>Cookie 必须明确设置 <code>SameSite=None</code>，因为 Chrome 的默认值为 <code>SameSite=Lax</code>（Firefox 和 Safari 的默认值为 <code>SameSite=None</code>）。</li> <li>Cookie 必须设置 <code>Secure</code> 属性。</li> <li>存储访问权限会在浏览器使用30天且没有用户交互后逐步失效。与嵌入内容的交互会将此限制再延长30天。当调用 <code>Document.requestStorageAccessFor()</code> 时不会发生这种情况，因为用户已经在页面上。</li> </ul> </section><section class="content-section" aria-labelledby="firefox"> <h3 id="firefox" class="heading"><a class="heading-anchor" href="#firefox">Firefox</a></h3> <ul> <li>如果嵌入源 <code>tracker.example</code> 已经获得了顶级源 <code>foo.example</code> 上的第三方 Cookie 访问权限，并且用户在不到30天内再次访问了 <code>foo.example</code> 嵌入 <code>tracker.example</code> 页面的页面，那么嵌入源在加载时将立即获得第三方 Cookie 访问权限。</li> <li>存储访问授权将在30个日历日后失效。</li> </ul> <p>Firefox 新存储访问策略（用于阻止跟踪 Cookie）的文档包含对存储访问授权范围的详细描述。</p> </section><section class="content-section" aria-labelledby="safari"> <h3 id="safari" class="heading"><a class="heading-anchor" href="#safari">Safari</a></h3> <ul> <li>存储访问权限会在浏览器使用30天且没有用户交互后逐步失效。成功使用存储访问API会重置此计数器。</li> </ul> </section><section class="content-section" aria-labelledby="examples"> <h2 id="examples" class="heading"><a class="heading-anchor" href="#examples">示例</a></h2> <ul> <li>有关包含代码示例的实现指南，请参阅使用存储访问API。</li> </ul> </section><section class="content-section" aria-labelledby="api_methods"> <h2 id="api_methods" class="heading"><a class="heading-anchor" href="#api_methods">API方法</a></h2> <dl> <dt id="document.hasstorageaccess"><a href="/en-US/docs/Web/API/Document/hasStorageAccess"><code>Document.hasStorageAccess()</code></a></dt> <dd> <p>返回一个 Promise，该 Promise 解析为一个布尔值，指示文档是否具有对第三方 Cookie 的访问权限。</p> </dd> <dt id="document.hasunpartitionedcookieaccess"><a href="/en-US/docs/Web/API/Document/hasUnpartitionedCookieAccess"><code>Document.hasUnpartitionedCookieAccess()</code></a></dt> <dd> <p><code>Document.hasStorageAccess()</code> 的新名称。</p> </dd> <dt id="document.requeststorageaccess"><a href="/en-US/docs/Web/API/Document/requestStorageAccess"><code>Document.requestStorageAccess()</code></a></dt> <dd> <p>允许在第三方上下文中（即嵌入在 <code><iframe></code> 中）加载的内容请求访问第三方 Cookie 和未分区状态；返回一个 Promise，如果授予访问权限则解析，如果拒绝访问权限则拒绝。</p> </dd> <dt id="document.requeststorageaccessfor"><code>Document.requestStorageAccessFor()</code> 实验性</dt> <dd> <p>存储访问 API 的一个提议扩展，允许顶级站点代表来自同一相关网站集中的另一个站点的嵌入内容请求第三方 Cookie 访问权限。返回一个 Promise，如果授予访问权限则解析，如果拒绝访问权限则拒绝。</p> </dd> </dl> <div class="notecard note"> <p><strong>注意：</strong> 用户交互会传播到这些方法返回的 Promise，允许调用者执行需要用户交互的操作，而无需第二次点击。例如，调用者可以从已解析的 Promise 中打开一个弹出窗口，而不会触发 Firefox 的弹出窗口阻止程序。</p> </div> </section><section class="content-section" aria-labelledby="additions_to_other_apis"> <h3 id="additions_to_other_apis" class="heading"><a class="heading-anchor" href="#additions_to_other_apis">对其他API的补充</a></h3> <dl> <dt id="permissions.query"><code>Permissions.query()</code>，<code>"storage-access"</code> 功能名称</dt> <dd> <p>在支持的浏览器中，这可以查询是否通常已授予第三方 Cookie 访问权限，即授予另一个同站嵌入。如果是这样，您可以在没有用户交互的情况下调用 <code>requestStorageAccess()</code>，并且 Promise 将自动解决。</p> </dd> <dt id="permissions.query_2"><a href="#permissions.query_2"><code>Permissions.query()</code>，<code>"top-level-storage-access"</code> 功能名称实验性</a></dt> <dd> <p>一个单独的功能名称，用于查询是否已通过 <code>requestStorageAccessFor()</code> 授予访问第三方 Cookie 的权限。如果是这样，您无需再次调用 <code>requestStorageAccessFor()</code>。</p> </dd> </dl> </section><section class="content-section" aria-labelledby="specifications"> <h2 id="specifications" class="heading"><a class="heading-anchor" href="#specifications">规范</a></h2> <table> <thead> <tr> <th scope="col">规范</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="https://privacycg.github.io/storage-access/" rel="noopener" target="_blank">Storage Access API</a></td> </tr><tr> <td><a class="external" href="https://privacycg.github.io/saa-non-cookie-storage/" rel="noopener" target="_blank">将存储访问API（SAA）扩展到非Cookie存储</a></td> </tr> </tbody> </table> </section><section class="content-section" aria-labelledby="browser_compatibility"> <h2 id="browser_compatibility" class="heading"><a class="heading-anchor" href="#browser_compatibility">浏览器兼容性</a></h2>  </section><section class="content-section" aria-labelledby="api.Document.hasStorageAccess"> <h3 id="api.Document.hasStorageAccess" class="heading"><a class="heading-anchor" href="#api.Document.hasStorageAccess">api.Document.hasStorageAccess</a></h3> <mdn-compat-table-lazy locale="en-US" query="api.Document.hasStorageAccess"><template shadowroot="open" shadowrootmode="open"><style>*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}</style><p>加载中…</p></template></mdn-compat-table-lazy> </section><section class="content-section" aria-labelledby="api.Document.hasUnpartitionedCookieAccess"> <h3 id="api.Document.hasUnpartitionedCookieAccess" class="heading"><a class="heading-anchor" href="#api.Document.hasUnpartitionedCookieAccess">api.Document.hasUnpartitionedCookieAccess</a></h3> <mdn-compat-table-lazy locale="en-US" query="api.Document.hasUnpartitionedCookieAccess"><template shadowroot="open" shadowrootmode="open"><style>*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}</style><p>加载中…</p></template></mdn-compat-table-lazy> </section><section class="content-section" aria-labelledby="api.Document.requestStorageAccess"> <h3 id="api.Document.requestStorageAccess" class="heading"><a class="heading-anchor" href="#api.Document.requestStorageAccess">api.Document.requestStorageAccess</a></h3> <mdn-compat-table-lazy locale="en-US" query="api.Document.requestStorageAccess"><template shadowroot="open" shadowrootmode="open"><style>*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}</style><p>加载中…</p></template></mdn-compat-table-lazy> </section><section class="content-section" aria-labelledby="api.Document.requestStorageAccessFor"> <h3 id="api.Document.requestStorageAccessFor" class="heading"><a class="heading-anchor" href="#api.Document.requestStorageAccessFor">api.Document.requestStorageAccessFor</a></h3> <mdn-compat-table-lazy locale="en-US" query="api.Document.requestStorageAccessFor"><template shadowroot="open" shadowrootmode="open"><style>*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}</style><p>加载中…</p></template></mdn-compat-table-lazy> </section><section class="content-section" aria-labelledby="api.Permissions.permission_storage-access"> <h3 id="api.Permissions.permission_storage-access" class="heading"><a class="heading-anchor" href="#api.Permissions.permission_storage-access">api.Permissions.permission_storage-access</a></h3> <mdn-compat-table-lazy locale="en-US" query="api.Permissions.permission_storage-access"><template shadowroot="open" shadowrootmode="open"><style>*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}</style><p>加载中…</p></template></mdn-compat-table-lazy> </section><section class="content-section" aria-labelledby="see_also"> <h2 id="see_also" class="heading"><a class="heading-anchor" href="#see_also">另见</a></h2> <ul> <li><a href="/en-US/docs/Web/API/Storage_Access_API/Using">使用 Storage Access API</a></li> <li><a href="https://webkit.ac.cn/blog/8124/introducing-storage-access-api/" class="external" target="_blank">Storage Access API 介绍</a> (WebKit 博客)</li> </ul> </section> <section class="content-section article-footer" aria-labelledby="feedback"> <div class="article-footer__inner"> <div class="article-footer__svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" fill="none" viewBox="0 0 162 162"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="currentColor" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset=".246" stop-color="#2C81FA"></stop><stop offset=".516" stop-color="#5497F8"></stop><stop offset=".821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div> <h2 id="feedback">帮助改进 MDN</h2> <mdn-content-feedback locale="en-US"><template shadowroot="open" shadowrootmode="open"><style>.content-feedback{border:none;margin:0 0 .25rem;padding:0}.content-feedback>label{display:block;margin-bottom:.25rem}.content-feedback .thank-you{display:block;margin-bottom:calc(2.75rem + 2px)}.content-feedback mdn-button{flex:1;min-width:0}.content-feedback--buttons{display:inline-flex;gap:.75rem;margin:.25rem 0}.content-feedback--radios{align-items:center;display:flex;gap:.25rem;margin:.25rem 0}</style><fieldset class="content-feedback"> <label>此页面对您有帮助吗？ </label> <div class="content-feedback--buttons"> <mdn-button data-vote="yes" variant="secondary" action="positive" defer-hydration=""><template shadowroot="open" shadowrootmode="open"><style>.button{align-items:center;background-color:initial;border:1px solid #0000;border-radius:.25rem;color:var(--color-text-primary);column-gap:.3125em;cursor:pointer;display:inline-flex;font-family:var(--font-family-text);font-size:.875em;font-weight:450;justify-content:center;line-height:var(--font-line-ui);margin:0;padding:.5em;-webkit-text-decoration:none;text-decoration:none;vertical-align:middle}.button[data-variant=primary]{--csstools-light-dark-toggle-33eaa513-0:var(--csstools-color-scheme--light) var(--color-black);color:var(--csstools-light-dark-toggle-33eaa513-0,var(--color-white));--csstools-light-dark-toggle-33eaa513-1:var(--csstools-color-scheme--light) var(--color-white);background-color:var(--csstools-light-dark-toggle-33eaa513-1,var(--color-black))}@supports (color:light-dark(red,red)){.button[data-variant=primary]{background-color:light-dark(var(--color-black),var(--color-white));color:light-dark(var(--color-white),var(--color-black))}}.button[data-variant=primary]:hover{--csstools-light-dark-toggle-33eaa513-2:var(--csstools-color-scheme--light) var(--color-gray-80);background-color:var(--csstools-light-dark-toggle-33eaa513-2,var(--color-gray-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary]:hover{background-color:light-dark(var(--color-gray-20),var(--color-gray-80))}}.button[data-variant=primary][data-action=positive]{color:var(--color-white);--csstools-light-dark-toggle-33eaa513-3:var(--csstools-color-scheme--light) var(--color-green-20);background-color:var(--csstools-light-dark-toggle-33eaa513-3,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=positive]{background-color:light-dark(var(--color-green-50),var(--color-green-20))}}.button[data-variant=primary][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-4:var(--csstools-color-scheme--light) var(--color-green-50);background-color:var(--csstools-light-dark-toggle-33eaa513-4,var(--color-green-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=positive]:hover{background-color:light-dark(var(--color-green-20),var(--color-green-50))}}.button[data-variant=primary][data-action=negative]{color:var(--color-white);--csstools-light-dark-toggle-33eaa513-5:var(--csstools-color-scheme--light) var(--color-red-20);background-color:var(--csstools-light-dark-toggle-33eaa513-5,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=negative]{background-color:light-dark(var(--color-red-50),var(--color-red-20))}}.button[data-variant=primary][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-6:var(--csstools-color-scheme--light) var(--color-red-50);background-color:var(--csstools-light-dark-toggle-33eaa513-6,var(--color-red-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=negative]:hover{background-color:light-dark(var(--color-red-20),var(--color-red-50))}}.button[data-variant=secondary]{border-color:currentcolor}.button[data-variant=secondary]:hover{--csstools-light-dark-toggle-33eaa513-7:var(--csstools-color-scheme--light) var(--color-gray-20);background-color:var(--csstools-light-dark-toggle-33eaa513-7,var(--color-gray-80))}@supports (color:light-dark(red,red)){.button[data-variant=secondary]:hover{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))}}.button[data-variant=secondary][data-action=positive]{--csstools-light-dark-toggle-33eaa513-8:var(--csstools-color-scheme--light) var(--color-green-80);color:var(--csstools-light-dark-toggle-33eaa513-8,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=positive]{color:light-dark(var(--color-green-50),var(--color-green-80))}}.button[data-variant=secondary][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-9:var(--csstools-color-scheme--light) var(--color-green-10);background-color:var(--csstools-light-dark-toggle-33eaa513-9,var(--color-green-90))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=positive]:hover{background-color:light-dark(var(--color-green-90),var(--color-green-10))}}.button[data-variant=secondary][data-action=negative]{--csstools-light-dark-toggle-33eaa513-10:var(--csstools-color-scheme--light) var(--color-red-80);color:var(--csstools-light-dark-toggle-33eaa513-10,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=negative]{color:light-dark(var(--color-red-50),var(--color-red-80))}}.button[data-variant=secondary][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-11:var(--csstools-color-scheme--light) var(--color-red-10);background-color:var(--csstools-light-dark-toggle-33eaa513-11,var(--color-red-90))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=negative]:hover{background-color:light-dark(var(--color-red-90),var(--color-red-10))}}.button[data-variant=plain]:hover{--csstools-light-dark-toggle-33eaa513-12:var(--csstools-color-scheme--light) var(--color-gray-20);background-color:var(--csstools-light-dark-toggle-33eaa513-12,var(--color-gray-80))}@supports (color:light-dark(red,red)){.button[data-variant=plain]:hover{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))}}.button[data-variant=plain][data-action=positive]{--csstools-light-dark-toggle-33eaa513-13:var(--csstools-color-scheme--light) var(--color-green-80);color:var(--csstools-light-dark-toggle-33eaa513-13,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=positive]{color:light-dark(var(--color-green-50),var(--color-green-80))}}.button[data-variant=plain][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-14:var(--csstools-color-scheme--light) var(--color-green-10);background-color:var(--csstools-light-dark-toggle-33eaa513-14,var(--color-green-90))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=positive]:hover{background-color:light-dark(var(--color-green-90),var(--color-green-10))}}.button[data-variant=plain][data-action=negative]{--csstools-light-dark-toggle-33eaa513-15:var(--csstools-color-scheme--light) var(--color-red-80);color:var(--csstools-light-dark-toggle-33eaa513-15,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=negative]{color:light-dark(var(--color-red-50),var(--color-red-80))}}.button[data-variant=plain][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-16:var(--csstools-color-scheme--light) var(--color-red-10);background-color:var(--csstools-light-dark-toggle-33eaa513-16,var(--color-red-90))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=negative]:hover{background-color:light-dark(var(--color-red-90),var(--color-red-10))}}.button[disabled]{--csstools-light-dark-toggle-33eaa513-17:var(--csstools-color-scheme--light) var(--color-gray-60)!important;color:var(--csstools-light-dark-toggle-33eaa513-17,var(--color-gray-40))!important;cursor:default;--csstools-light-dark-toggle-33eaa513-18:var(--csstools-color-scheme--light) var(--color-gray-20)!important;background-color:var(--csstools-light-dark-toggle-33eaa513-18,var(--color-gray-80))!important;border-color:#0000}@supports (color:light-dark(red,red)){.button[disabled]{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))!important;color:light-dark(var(--color-gray-40),var(--color-gray-60))!important}}.button .icon{display:flex}.button svg{height:1.25em;width:1.25em}.button .label{padding-block:.125em;padding-inline:.0625em}:host{display:inline-flex;vertical-align:middle}.button{box-sizing:border-box;height:100%;width:100%}</style> <button class="button" aria-labelledby="label-4s4ra7p7jkf" data-variant="secondary" data-action="positive" part="button"> <span class="icon" part="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M7 10v12m8-16.12L14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88"></path></svg></span> <span id="label-4s4ra7p7jkf" class="label" part="label"><slot></slot></span>  </button> </template> 是 </mdn-button> <mdn-button data-vote="no" variant="secondary" action="negative" defer-hydration=""><template shadowroot="open" shadowrootmode="open"><style>.button{align-items:center;background-color:initial;border:1px solid #0000;border-radius:.25rem;color:var(--color-text-primary);column-gap:.3125em;cursor:pointer;display:inline-flex;font-family:var(--font-family-text);font-size:.875em;font-weight:450;justify-content:center;line-height:var(--font-line-ui);margin:0;padding:.5em;-webkit-text-decoration:none;text-decoration:none;vertical-align:middle}.button[data-variant=primary]{--csstools-light-dark-toggle-33eaa513-0:var(--csstools-color-scheme--light) var(--color-black);color:var(--csstools-light-dark-toggle-33eaa513-0,var(--color-white));--csstools-light-dark-toggle-33eaa513-1:var(--csstools-color-scheme--light) var(--color-white);background-color:var(--csstools-light-dark-toggle-33eaa513-1,var(--color-black))}@supports (color:light-dark(red,red)){.button[data-variant=primary]{background-color:light-dark(var(--color-black),var(--color-white));color:light-dark(var(--color-white),var(--color-black))}}.button[data-variant=primary]:hover{--csstools-light-dark-toggle-33eaa513-2:var(--csstools-color-scheme--light) var(--color-gray-80);background-color:var(--csstools-light-dark-toggle-33eaa513-2,var(--color-gray-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary]:hover{background-color:light-dark(var(--color-gray-20),var(--color-gray-80))}}.button[data-variant=primary][data-action=positive]{color:var(--color-white);--csstools-light-dark-toggle-33eaa513-3:var(--csstools-color-scheme--light) var(--color-green-20);background-color:var(--csstools-light-dark-toggle-33eaa513-3,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=positive]{background-color:light-dark(var(--color-green-50),var(--color-green-20))}}.button[data-variant=primary][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-4:var(--csstools-color-scheme--light) var(--color-green-50);background-color:var(--csstools-light-dark-toggle-33eaa513-4,var(--color-green-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=positive]:hover{background-color:light-dark(var(--color-green-20),var(--color-green-50))}}.button[data-variant=primary][data-action=negative]{color:var(--color-white);--csstools-light-dark-toggle-33eaa513-5:var(--csstools-color-scheme--light) var(--color-red-20);background-color:var(--csstools-light-dark-toggle-33eaa513-5,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=negative]{background-color:light-dark(var(--color-red-50),var(--color-red-20))}}.button[data-variant=primary][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-6:var(--csstools-color-scheme--light) var(--color-red-50);background-color:var(--csstools-light-dark-toggle-33eaa513-6,var(--color-red-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=negative]:hover{background-color:light-dark(var(--color-red-20),var(--color-red-50))}}.button[data-variant=secondary]{border-color:currentcolor}.button[data-variant=secondary]:hover{--csstools-light-dark-toggle-33eaa513-7:var(--csstools-color-scheme--light) var(--color-gray-20);background-color:var(--csstools-light-dark-toggle-33eaa513-7,var(--color-gray-80))}@supports (color:light-dark(red,red)){.button[data-variant=secondary]:hover{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))}}.button[data-variant=secondary][data-action=positive]{--csstools-light-dark-toggle-33eaa513-8:var(--csstools-color-scheme--light) var(--color-green-80);color:var(--csstools-light-dark-toggle-33eaa513-8,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=positive]{color:light-dark(var(--color-green-50),var(--color-green-80))}}.button[data-variant=secondary][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-9:var(--csstools-color-scheme--light) var(--color-green-10);background-color:var(--csstools-light-dark-toggle-33eaa513-9,var(--color-green-90))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=positive]:hover{background-color:light-dark(var(--color-green-90),var(--color-green-10))}}.button[data-variant=secondary][data-action=negative]{--csstools-light-dark-toggle-33eaa513-10:var(--csstools-color-scheme--light) var(--color-red-80);color:var(--csstools-light-dark-toggle-33eaa513-10,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=negative]{color:light-dark(var(--color-red-50),var(--color-red-80))}}.button[data-variant=secondary][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-11:var(--csstools-color-scheme--light) var(--color-red-10);background-color:var(--csstools-light-dark-toggle-33eaa513-11,var(--color-red-90))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=negative]:hover{background-color:light-dark(var(--color-red-90),var(--color-red-10))}}.button[data-variant=plain]:hover{--csstools-light-dark-toggle-33eaa513-12:var(--csstools-color-scheme--light) var(--color-gray-20);background-color:var(--csstools-light-dark-toggle-33eaa513-12,var(--color-gray-80))}@supports (color:light-dark(red,red)){.button[data-variant=plain]:hover{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))}}.button[data-variant=plain][data-action=positive]{--csstools-light-dark-toggle-33eaa513-13:var(--csstools-color-scheme--light) var(--color-green-80);color:var(--csstools-light-dark-toggle-33eaa513-13,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=positive]{color:light-dark(var(--color-green-50),var(--color-green-80))}}.button[data-variant=plain][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-14:var(--csstools-color-scheme--light) var(--color-green-10);background-color:var(--csstools-light-dark-toggle-33eaa513-14,var(--color-green-90))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=positive]:hover{background-color:light-dark(var(--color-green-90),var(--color-green-10))}}.button[data-variant=plain][data-action=negative]{--csstools-light-dark-toggle-33eaa513-15:var(--csstools-color-scheme--light) var(--color-red-80);color:var(--csstools-light-dark-toggle-33eaa513-15,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=negative]{color:light-dark(var(--color-red-50),var(--color-red-80))}}.button[data-variant=plain][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-16:var(--csstools-color-scheme--light) var(--color-red-10);background-color:var(--csstools-light-dark-toggle-33eaa513-16,var(--color-red-90))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=negative]:hover{background-color:light-dark(var(--color-red-90),var(--color-red-10))}}.button[disabled]{--csstools-light-dark-toggle-33eaa513-17:var(--csstools-color-scheme--light) var(--color-gray-60)!important;color:var(--csstools-light-dark-toggle-33eaa513-17,var(--color-gray-40))!important;cursor:default;--csstools-light-dark-toggle-33eaa513-18:var(--csstools-color-scheme--light) var(--color-gray-20)!important;background-color:var(--csstools-light-dark-toggle-33eaa513-18,var(--color-gray-80))!important;border-color:#0000}@supports (color:light-dark(red,red)){.button[disabled]{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))!important;color:light-dark(var(--color-gray-40),var(--color-gray-60))!important}}.button .icon{display:flex}.button svg{height:1.25em;width:1.25em}.button .label{padding-block:.125em;padding-inline:.0625em}:host{display:inline-flex;vertical-align:middle}.button{box-sizing:border-box;height:100%;width:100%}</style> <button class="button" aria-labelledby="label-fve8cvqs2s5" data-variant="secondary" data-action="negative" part="button"> <span class="icon" part="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M17 14V2M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88"></path></svg></span> <span id="label-fve8cvqs2s5" class="label" part="label"><slot></slot></span>  </button> </template> 否 </mdn-button> </div> </fieldset></template></mdn-content-feedback> <a class="article-footer__contribute" href="/en-US/docs/MDN/Community/Getting_started">了解如何贡献</a> <p class="article-footer__last-modified">本页面由 MDN 贡献者最后修改于 2025年7月8日。</p> <div class="article-footer__links"> <a class="external" href="https://github.com/mdn/content/blob/main/files/en-us/web/api/storage_access_api/index.md?plain=1" title="文件夹：en-us/web/api/storage_access_api (在新标签页中打开)" target="_blank" rel="noopener">在 GitHub 上查看此页面</a> • <a class="external" href="https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FStorage_Access_API&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Fweb%2Fapi%2Fstorage_access_api%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FStorage_Access_API%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fapi%2Fstorage_access_api%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fa9022d6a71668aa945c6a0c1dbe0d531a98e0816%0A*+Document+last+modified%3A+2025-07-08T12%3A41%3A52.000Z%0A%0A%3C%2Fdetails%3E" title="这将带您到 GitHub 提交新问题。" target="_blank" rel="noopener">报告此内容的问题</a></div> </div> </section> </div> </main> <aside class="reference-layout__sidebar" id="main-sidebar"> <nav class="left-sidebar"> <div class="left-sidebar__header"> <mdn-sidebar-filter><template shadowroot="open" shadowrootmode="open"><style>.visually-hidden{border:0!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}:host{align-items:center;display:grid;grid-template-areas:"icon input button";grid-template-columns:2.2rem 1fr min-content}.icon{background-color:var(--color-text-secondary);content:"";grid-area:icon;height:1.25rem;justify-self:center;margin-left:.4rem;-webkit-mask-image:url(/static/ssr/filter.b77a4ccbfb57e2ef.svg);mask-image:url(/static/ssr/filter.b77a4ccbfb57e2ef.svg);-webkit-mask-size:cover;mask-size:cover;width:1.25rem}.input{background-color:initial;border:1px solid var(--color-border-primary);border-radius:var(--radius-full);grid-area:1/1/-1/-1;margin:0;padding:.3rem 4.2rem .3rem 2.2rem;width:100%}.input::placeholder{color:var(--color-text-secondary)}.input:focus{border-color:#0000}.counter{background-color:var(--color-background-yellow);border-radius:var(--radius-normal);font-size:var(--font-size-small);grid-area:input;justify-self:end;line-height:var(--font-line-ui);padding:.25rem;white-space:nowrap}.button{grid-area:button}.button::part(button){border-radius:50%}.button::part(button):hover{background-color:initial}:placeholder-shown~.button{visibility:hidden}</style> <label class="icon" for="input"> <span class="visually-hidden">筛选侧边栏</span> </label> <input id="input" autocomplete="off" class="input" type="text" placeholder="Filter" value="" />  <mdn-button class="button" variant="plain" icon-only="" label="Clear filter input" defer-hydration=""><template shadowroot="open" shadowrootmode="open"><style>.button{align-items:center;background-color:initial;border:1px solid #0000;border-radius:.25rem;color:var(--color-text-primary);column-gap:.3125em;cursor:pointer;display:inline-flex;font-family:var(--font-family-text);font-size:.875em;font-weight:450;justify-content:center;line-height:var(--font-line-ui);margin:0;padding:.5em;-webkit-text-decoration:none;text-decoration:none;vertical-align:middle}.button[data-variant=primary]{--csstools-light-dark-toggle-33eaa513-0:var(--csstools-color-scheme--light) var(--color-black);color:var(--csstools-light-dark-toggle-33eaa513-0,var(--color-white));--csstools-light-dark-toggle-33eaa513-1:var(--csstools-color-scheme--light) var(--color-white);background-color:var(--csstools-light-dark-toggle-33eaa513-1,var(--color-black))}@supports (color:light-dark(red,red)){.button[data-variant=primary]{background-color:light-dark(var(--color-black),var(--color-white));color:light-dark(var(--color-white),var(--color-black))}}.button[data-variant=primary]:hover{--csstools-light-dark-toggle-33eaa513-2:var(--csstools-color-scheme--light) var(--color-gray-80);background-color:var(--csstools-light-dark-toggle-33eaa513-2,var(--color-gray-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary]:hover{background-color:light-dark(var(--color-gray-20),var(--color-gray-80))}}.button[data-variant=primary][data-action=positive]{color:var(--color-white);--csstools-light-dark-toggle-33eaa513-3:var(--csstools-color-scheme--light) var(--color-green-20);background-color:var(--csstools-light-dark-toggle-33eaa513-3,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=positive]{background-color:light-dark(var(--color-green-50),var(--color-green-20))}}.button[data-variant=primary][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-4:var(--csstools-color-scheme--light) var(--color-green-50);background-color:var(--csstools-light-dark-toggle-33eaa513-4,var(--color-green-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=positive]:hover{background-color:light-dark(var(--color-green-20),var(--color-green-50))}}.button[data-variant=primary][data-action=negative]{color:var(--color-white);--csstools-light-dark-toggle-33eaa513-5:var(--csstools-color-scheme--light) var(--color-red-20);background-color:var(--csstools-light-dark-toggle-33eaa513-5,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=negative]{background-color:light-dark(var(--color-red-50),var(--color-red-20))}}.button[data-variant=primary][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-6:var(--csstools-color-scheme--light) var(--color-red-50);background-color:var(--csstools-light-dark-toggle-33eaa513-6,var(--color-red-20))}@supports (color:light-dark(red,red)){.button[data-variant=primary][data-action=negative]:hover{background-color:light-dark(var(--color-red-20),var(--color-red-50))}}.button[data-variant=secondary]{border-color:currentcolor}.button[data-variant=secondary]:hover{--csstools-light-dark-toggle-33eaa513-7:var(--csstools-color-scheme--light) var(--color-gray-20);background-color:var(--csstools-light-dark-toggle-33eaa513-7,var(--color-gray-80))}@supports (color:light-dark(red,red)){.button[data-variant=secondary]:hover{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))}}.button[data-variant=secondary][data-action=positive]{--csstools-light-dark-toggle-33eaa513-8:var(--csstools-color-scheme--light) var(--color-green-80);color:var(--csstools-light-dark-toggle-33eaa513-8,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=positive]{color:light-dark(var(--color-green-50),var(--color-green-80))}}.button[data-variant=secondary][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-9:var(--csstools-color-scheme--light) var(--color-green-10);background-color:var(--csstools-light-dark-toggle-33eaa513-9,var(--color-green-90))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=positive]:hover{background-color:light-dark(var(--color-green-90),var(--color-green-10))}}.button[data-variant=secondary][data-action=negative]{--csstools-light-dark-toggle-33eaa513-10:var(--csstools-color-scheme--light) var(--color-red-80);color:var(--csstools-light-dark-toggle-33eaa513-10,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=negative]{color:light-dark(var(--color-red-50),var(--color-red-80))}}.button[data-variant=secondary][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-11:var(--csstools-color-scheme--light) var(--color-red-10);background-color:var(--csstools-light-dark-toggle-33eaa513-11,var(--color-red-90))}@supports (color:light-dark(red,red)){.button[data-variant=secondary][data-action=negative]:hover{background-color:light-dark(var(--color-red-90),var(--color-red-10))}}.button[data-variant=plain]:hover{--csstools-light-dark-toggle-33eaa513-12:var(--csstools-color-scheme--light) var(--color-gray-20);background-color:var(--csstools-light-dark-toggle-33eaa513-12,var(--color-gray-80))}@supports (color:light-dark(red,red)){.button[data-variant=plain]:hover{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))}}.button[data-variant=plain][data-action=positive]{--csstools-light-dark-toggle-33eaa513-13:var(--csstools-color-scheme--light) var(--color-green-80);color:var(--csstools-light-dark-toggle-33eaa513-13,var(--color-green-50))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=positive]{color:light-dark(var(--color-green-50),var(--color-green-80))}}.button[data-variant=plain][data-action=positive]:hover{--csstools-light-dark-toggle-33eaa513-14:var(--csstools-color-scheme--light) var(--color-green-10);background-color:var(--csstools-light-dark-toggle-33eaa513-14,var(--color-green-90))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=positive]:hover{background-color:light-dark(var(--color-green-90),var(--color-green-10))}}.button[data-variant=plain][data-action=negative]{--csstools-light-dark-toggle-33eaa513-15:var(--csstools-color-scheme--light) var(--color-red-80);color:var(--csstools-light-dark-toggle-33eaa513-15,var(--color-red-50))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=negative]{color:light-dark(var(--color-red-50),var(--color-red-80))}}.button[data-variant=plain][data-action=negative]:hover{--csstools-light-dark-toggle-33eaa513-16:var(--csstools-color-scheme--light) var(--color-red-10);background-color:var(--csstools-light-dark-toggle-33eaa513-16,var(--color-red-90))}@supports (color:light-dark(red,red)){.button[data-variant=plain][data-action=negative]:hover{background-color:light-dark(var(--color-red-90),var(--color-red-10))}}.button[disabled]{--csstools-light-dark-toggle-33eaa513-17:var(--csstools-color-scheme--light) var(--color-gray-60)!important;color:var(--csstools-light-dark-toggle-33eaa513-17,var(--color-gray-40))!important;cursor:default;--csstools-light-dark-toggle-33eaa513-18:var(--csstools-color-scheme--light) var(--color-gray-20)!important;background-color:var(--csstools-light-dark-toggle-33eaa513-18,var(--color-gray-80))!important;border-color:#0000}@supports (color:light-dark(red,red)){.button[disabled]{background-color:light-dark(var(--color-gray-80),var(--color-gray-20))!important;color:light-dark(var(--color-gray-40),var(--color-gray-60))!important}}.button .icon{display:flex}.button svg{height:1.25em;width:1.25em}.button .label{padding-block:.125em;padding-inline:.0625em}:host{display:inline-flex;vertical-align:middle}.button{box-sizing:border-box;height:100%;width:100%}</style> <button class="button" aria-labelledby="label-nmzowwwo4" data-variant="plain" part="button"> <span class="icon" part="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"></path></svg></span> <span id="label-nmzowwwo4" class="label" hidden="" part="label"><slot></slot></span>  </button> </template></mdn-button> </template></mdn-sidebar-filter> </div> <div class="left-sidebar__content"><ol><li class="section"><em><a href="/en-US/docs/Web/API/Storage_Access_API" aria-current="page">Storage Access API</a></em></li><li><details open=""><summary><span>指南</span></summary><ol><li><a href="/en-US/docs/Web/API/Storage_Access_API/Using">使用 Storage Access API</a></li><li><a href="/en-US/docs/Web/API/Storage_Access_API/Related_website_sets">相关网站集</a><abbr class="icon icon-nonstandard" title="非标准。使用前请检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li></ol></details></li><li><details open=""><summary><span>接口</span></summary><ol><li><a href="/en-US/docs/Web/API/StorageAccessHandle"><code>StorageAccessHandle</code></a></li></ol></details></li><li><details open=""><summary><span>方法</span></summary><ol><li><a href="/en-US/docs/Web/API/Document/hasStorageAccess"><code>Document<wbr>.hasStorageAccess()</code></a></li><li><a href="/en-US/docs/Web/API/Document/hasUnpartitionedCookieAccess"><code>Document<wbr>.hasUnpartitionedCookieAccess()</code></a></li><li><a href="/en-US/docs/Web/API/Document/requestStorageAccess"><code>Document<wbr>.requestStorageAccess()</code></a></li><li><a href="/en-US/docs/Web/API/Document/requestStorageAccessFor"><code>Document<wbr>.requestStorageAccessFor()</code></a><abbr class="icon icon-experimental" title="实验性。未来行为可能会改变。"> <span class="visually-hidden">实验性</span> </abbr></li></ol></details></li></ol></div> </nav> </aside> </div> </div> <div class="page-layout__footer"> <mdn-placement-bottom></mdn-placement-bottom> <footer class="footer"> <div class="footer__mdn"> <div class="footer__intro"> <a class="footer__logo" href="/" aria-label="MDN logo"><svg xmlns="http://www.w3.org/2000/svg" width="83" height="24" viewBox="0 0 83 24"><path d="M9.4 0 2.81 21.17H.12L6.69 0zm2.38 0v21.17H9.4V0h2.4Zm9.27 0-6.56 21.17H11.8L18.36 0zm2.39 0v21.17h-2.4V0zm22.11 16.83h-3.93v-1.27h.87v-3.63c0-.85-.16-1.45-.48-1.82a1.65 1.65 0 0 0-1.3-.52c-.74 0-1.3.25-1.66.78a3 3 0 0 0-.58 1.58v3.59h1.38v1.26h-3.93v-1.26h.87v-3.6c0-.88-.16-1.48-.48-1.83a1.7 1.7 0 0 0-1.29-.52 1.93 1.93 0 0 0-1.65.75 2.85 2.85 0 0 0-.58 1.6v3.62h1.59v1.27h-4.64v-1.27h1.37V9.75h-1.4V8.46h3.08v1.47c.28-.48.62-.87 1.08-1.2a3 3 0 0 1 1.68-.45c.67 0 1.22.16 1.73.48.5.32.85.8 1.03 1.47.25-.57.62-1.03 1.13-1.4.5-.37 1.1-.55 1.81-.55.8 0 1.5.25 2.05.75.55.51.85 1.3.85 2.35v4.18h1.4zm9.77 0H52.3v-1.66c-.27.51-.66.95-1.13 1.29-.56.4-1.23.59-1.9.55-1.11 0-2-.37-2.67-1.12a4.4 4.4 0 0 1-1-3.06c0-1.15.3-2.2.93-3.15.6-.94 1.58-1.43 2.94-1.43s2.25.5 2.83 1.5V5.22h-2V3.93h3.63v11.63h1.38v1.27Zm-3.06-3.86v-1.02a2.28 2.28 0 0 0-.73-1.67 2.4 2.4 0 0 0-1.66-.65 2.18 2.18 0 0 0-1.88.9 3.63 3.63 0 0 0-.65 2.2c0 .95.23 1.68.7 2.19.45.5 1.03.76 1.7.76.73 0 1.33-.3 1.79-.88.48-.6.71-1.21.73-1.83m14.14 3.86h-4.43v-1.27h1.37v-3.63c0-.85-.16-1.45-.5-1.82a1.68 1.68 0 0 0-1.31-.52c-.71 0-1.29.23-1.7.69a2.52 2.52 0 0 0-.67 1.6v3.66h1.38v1.26H56.1v-1.26h1.38v-5.8h-1.42V8.47h3.12V9.9c.6-1.06 1.57-1.6 2.92-1.6.83 0 1.54.26 2.12.77.57.5.85 1.28.85 2.34v4.19h1.38v1.24h-.05Zm1.31 5.15H83V24H67.71z"></path></svg></a> <p>你的更美好互联网蓝图。</p> </div> <ul class="footer__socials"> <li> <a href="https://github.com/mdn/" aria-label="MDN on GitHub" data-icon="github"></a> </li> <li> <a href="https://bsky.app/profile/developer.mozilla.org" aria-label="MDN on Bluesky" data-icon="bluesky"></a> </li> <li> <a href="https://x.com/mozdevnet" aria-label="MDN on X" data-icon="x"></a> </li> <li> <a href="https://mastodon.social/@mdn" aria-label="MDN on Mastodon" data-icon="mastodon"></a> </li> <li> <a href="/en-US/blog/rss.xml" aria-label="MDN blog RSS feed" data-icon="rss"></a> </li> </ul> <dl class="footer__links"> <dt>MDN</dt> <dd> <ul> <li> <a href="/en-US/about" class="">关于</a> </li> <li> <a href="/en-US/blog/" class="">博客</a> </li> <li> <a href="https://www.mozilla.org/en-US/careers/listings/" class="external">Mozilla 职业</a> </li> <li> <a href="/en-US/advertising" class="">与我们一起做广告</a> </li> <li> <a href="/en-US/plus" class="">MDN Plus</a> </li> <li> <a href="https://support.mozilla.org/products/mdn-plus" class="external">产品帮助</a> </li> </ul> </dd> </dl> <dl class="footer__links"> <dt>贡献</dt> <dd> <ul> <li> <a href="/en-US/community" class="">MDN 社区</a> </li> <li> <a href="/en-US/docs/MDN/Community" class="">社区资源</a> </li> <li> <a href="/en-US/docs/MDN/Writing_guidelines" class="">写作指南</a> </li> <li> <a href="/discord" class="external">MDN Discord</a> </li> <li> <a href="https://github.com/mdn" class="external">GitHub 上的 MDN</a> </li> </ul> </dd> </dl> <dl class="footer__links"> <dt>开发者</dt> <dd> <ul> <li> <a href="/en-US/docs/Web" class="">Web 技术</a> </li> <li> <a href="/en-US/docs/Learn_web_development" class="">学习 Web 开发</a> </li> <li> <a href="/en-US/docs/MDN/Guides" class="">指南</a> </li> <li> <a href="/en-US/docs/MDN/Tutorials" class="">教程</a> </li> <li> <a href="/en-US/docs/Glossary" class="">术语表</a> </li> <li> <a href="https://hacks.mozilla.ac.cn/" class="external">Hacks 博客</a> </li> </ul> </dd> </dl> </div> <div class="footer__mozilla"> <a class="footer__logo" href="https://www.mozilla.org/" aria-label="Mozilla logo"><svg xmlns="http://www.w3.org/2000/svg" width="128" height="30" viewBox="0 0 256 60"><path d="m13.32 22.1 5.1 24.3h2.1l5.1-24.3H39.3v37.34h-7.26V28.46h-2.1l-6.96 30.98h-7.02L9.02 28.46h-2.1v31H-.35V22.1h13.66Zm45.12 8.74c8.73 0 13.8 5.15 13.8 14.57S67.14 60 58.44 60c-8.73 0-13.8-5.17-13.8-14.59 0-9.43 5.07-14.57 13.8-14.57m0 23.34c4.1 0 6.16-2.1 6.16-6.73v-4.12c0-4.62-2.06-6.73-6.16-6.73s-6.15 2.1-6.15 6.73v4.12c0 4.63 2.05 6.73 6.15 6.73m17.68-.14 14.82-17.26H76.32v-5.41h23.31v5.4L84.84 54.05h15.03v5.4H76.13v-5.41Zm28.07-22.67h10.7v28.07h-7.25V36.77h-3.48v-5.4zm3.44-9.27h7.26v5.4h-7.25v-5.4Zm12.62 0h10.72v37.34h-7.24V27.5h-3.48zm16.08 0h10.7v37.34h-7.25V27.5h-3.48v-5.4zm27.8 8.74c4.24 0 7.08 2.05 7.87 5.63h2.1v-5.1h8.88v5.4h-3.47v17.28h3.47v5.4h-4.25c-3 0-4.63-1.63-4.63-4.62v-.48H172c-.78 3.58-3.63 5.63-7.88 5.63-6.68 0-11.4-5.59-11.4-14.58 0-9 4.72-14.55 11.4-14.55m2.2 23.34c4.1 0 5.93-2.1 5.93-6.73v-4.12c0-4.62-1.82-6.73-5.94-6.73-3.99 0-5.92 2.1-5.92 6.73v4.13c0 4.62 1.92 6.72 5.93 6.72m46.28 5.27h-7.26V0h7.26zm6.3-28.41h30.8v-2.1l-20.4-7.32v-5.88l20.4-7.33v-2.1h-24.27V0h30.79v12l-16.62 5.63v2.11l16.61 5.64v12H218.9zm0-24.73h6.5v6.52h-6.5z"></path></svg></a> <ul> <li> <a href="https://www.mozilla.org/privacy/websites/" class="external">网站隐私声明</a> </li> <li> <a href="https://www.mozilla.org/en-US/privacy/websites/data-preferences/" class="external">遥测设置</a> </li> <li> <a href="https://www.mozilla.org/about/legal/terms/mozilla" class="external">法律</a> </li> <li> <a href="https://www.mozilla.org/about/governance/policies/participation/" class="external">社区参与指南</a> </li> </ul> <p>请访问 <a href="https://www.mozilla.org/">Mozilla 公司</a>的非营利父级组织 <a href="https://foundation.mozilla.org/">Mozilla 基金会</a>。<br />此内容的部分版权 ©1998–⁨2025⁩ 归各 mozilla.org 贡献者所有。内容受 <a href="/docs/MDN/Writing_guidelines/Attrib_copyright_license">知识共享许可协议</a> 的约束。</p> </div> </footer> </div> <div class="footer" style="padding: 2em 1em; text-align: center;"> © <script>document.write(new Date().getFullYear())</script> <i><script>document.write(location.host)</script></i>. Content available under <a href="/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>. </div></body></html>