クッキーを保存するボタンと、保存したクッキーを表示するボタンを設置し、カスタムブロックからクッキー操作を行います。
クッキーを操作するメソッドの構文
JavaScript でクッキーを保存・設定する
document.cookie = “名前=値; オプション1; オプション2; …”;
document.cookie = “username=chatuser; path=/; max-age=3600”;
username=chatuser：クッキーの名前と値path=/：このクッキーはサイト全体（/以下）で使えるmax-age=3600：クッキーの寿命（秒数）※expiresより優先されるexpires=日付：クッキーの有効期限（例：expires=Wed, 01 Jan 2030 00:00:00 GMT）domain=example.com：有効なドメイン範囲（通常は省略可）secure：HTTPS 通信時のみ送信される（https://限定）SameSite=Lax：クロスサイトでの送信制御：Lax,Strict,None
複数のクッキーを保存・取得
// 保存
document.cookie = "theme=dark; path=/";
document.cookie = "fontSize=14px; path=/";
// 取得
console.log(document.cookie);
// theme=dark; fontSize=14pxクッキーを削除する場合は期限切れにする。
document.cookie = "fontSize=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";クッキーを保存するカスタムブロック
import { useState } from "@wordpress/element";
import "./editor.scss";
export default function Edit() {
const [cookieValue, setCookieValue] = useState("");
// クッキーを保存
const setCookie = () => {
document.cookie = "username=user12345; path=/; max-age=3600";
alert("クッキーを保存しました");
};
// クッキーを表示
const showCookie = () => {
const value = document.cookie;
setCookieValue(value);
};
return (
<div>
<h2>クッキー操作ブロック</h2>
<button onClick={setCookie}>クッキーを保存</button>
<button onClick={showCookie}>クッキーを表示</button>
<p>
<strong>現在のクッキー：</strong>
{cookieValue}
</p>
</div>
);
}