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.org/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.org/" 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>