CookieConsent

下部 snackbar · localStorage · サービス別同意 API · ストレージ双方向表示

Preview

デモ

初回はバナーが表示されます。「デモをリセット」で localStorage を消して再読込できます。「設定する」は下のサービス別同意へスクロールします。

HTML

<tw-cookie-consent
  id="cookie-demo"
  service-ids="analytics,ads,personalization"
>
  <p>当サイトは Cookie を利用します。</p>
  <div class="cookie-consent-actions">
    <tw-button data-tw-cookie-accept-all>すべて承諾</tw-button>
    <a href="#cookie-services" data-tw-cookie-settings>
      <tw-button variant="stroke">設定する</tw-button>
    </a>
  </div>
</tw-cookie-consent>

<label>
  <input type="checkbox" data-cookie-service="analytics" />
  analytics
</label>

import "@b4moss/the-wheels";

const host = document.getElementById("cookie-demo");
const KEY = "tw-cookie-consent";

document.getElementById("cookie-reset")?.addEventListener("click", () => {
  localStorage.removeItem(KEY);
  location.reload();
});

document.querySelectorAll("[data-cookie-service]").forEach((input) => {
  input.addEventListener("change", () => {
    host.setServiceConsent(input.dataset.cookieService, input.checked);
    // refresh JSON view from localStorage…
  });
});

import "@b4moss/the-wheels";
import type { TwCookieConsent } from "@b4moss/the-wheels";

const host = document.getElementById("cookie-demo") as TwCookieConsent;
const KEY = "tw-cookie-consent";

document.getElementById("cookie-reset")?.addEventListener("click", () => {
  localStorage.removeItem(KEY);
  location.reload();
});

document.querySelectorAll<HTMLInputElement>("[data-cookie-service]").forEach((input) => {
  input.addEventListener("change", () => {
    const id = input.dataset.cookieService;
    if (!id) return;
    host.setServiceConsent(id, input.checked);
  });
});