API

<iframe
  sandbox="allow-storage-access-by-user-activation
                 allow-scripts
                 allow-same-origin">
  
</iframe>

function doThingsWithCookies() {
  document.cookie = "foo=bar"; // 
}

function doThingsWithLocalStorage(handle) {
  handle.localStorage.setItem("foo", "bar"); // 
}

async function handleCookieAccess() {
  if (!document.hasStorageAccess) {
    //  API 
    // 
    doThingsWithCookies();
  } else {
    const hasAccess = await document.hasStorageAccess();
    if (hasAccess) {
      // 
      doThingsWithCookies();
      // 
      const handle = await document.requestStorageAccess({
        localStorage: true,
      });
      doThingsWithLocalStorage(handle);
    } else {
      // 
      // 
      try {
        const permission = await navigator.permissions.query({
          name: "storage-access",
        });

        if (permission.state === "granted") {
          //  requestStorageAccess() 
          // 
          const handle = await document.requestStorageAccess({
            cookies: true,
            localStorage: true,
          });
          doThingsWithLocalStorage(handle);
          doThingsWithCookies();
        } else if (permission.state === "prompt") {
          // requestStorageAccess() 
          btn.addEventListener("click", async () => {
            try {
              const handle = await document.requestStorageAccess({
                cookies: true,
                localStorage: true,
              });
              doThingsWithLocalStorage(handle);
              doThingsWithCookies();
            } catch (err) {
              // 
              console.error(`Error obtaining storage access: ${err}.
                            Please sign in.`);
            }
          });
        } else if (permission.state === "denied") {
          // 
          // 
        }
      } catch (error) {
        console.log(`: ${error}`);
        doThingsWithCookies(); // 
      }
    }
  }
}

navigator.permissions
  .query({
    name: "top-level-storage-access",
    requestedOrigin: "https://example.com",
  })
  .then((permission) => {
    if (permission.state === "granted") {
      // 
      // requestStorageAccessFor() 
      doThingsWithCookies();
    } else if (permission.state === "prompt") {
      // requestStorageAccessFor() 
      btn.addEventListener("click", () => {
        // 
        rSAFor();
      });
    } else if (permission.state === "denied") {
      // 
      // 
    }
  });

function rSAFor() {
  if ("requestStorageAccessFor" in document) {
    document.requestStorageAccessFor("https://example.com").then(
      (res) => {
        doThingsWithCookies();
      },
      (err) => {
        // 
      },
    );
  }
}

navigator.permissions.query({
  name: "top-level-storage-access",
  requestedOrigin: "https://example.com",
});

function checkCookie() {
  fetch("https://example.com/getcookies.json", {
    method: "GET",
    credentials: "include",
  })
    .then((response) => response.json())
    .then((json) => {
      // 
    });
}