JavaScriptのdocument.cookieとは？クッキーの読み書き方法と有効期限の設定を初心者向けに解説

document.cookie は、ブラウザに保存される「クッキー（Cookie）」を参照・設定するためのプロパティです。
ユーザー情報の保存、ログイン状態の維持、アクセス解析など、さまざまな用途で利用されます。

document.cookieとは？

document.cookie は、クッキーの文字列を読み書きするためのプロパティです。

document.cookie = “key=value; expires=…; path=/”;

クッキーは次のような形式で保存されます：

キーワード1=値1; キーワード2=値2; …

そのため、書き込むときは = や ; を使って正しい形式で指定し、
読み込むときはそれらを分割して値を取り出す必要があります。

クッキーは次のように書き込みます：

document.cookie = “name=ank; expires=Tue, 31-Dec-2026 23:59:59 GMT”;

→ name=ank というクッキーを、有効期限付きで保存します。

クッキーは「上書き」ではなく「追加」されます。

document.cookie = “user=shin”;
document.cookie = “theme=dark”;

→ 2つのクッキーが保存されます。

クッキーを読み取ると、すべてのクッキーが 1 つの文字列として返されます。

let cookies = document.cookie;
// 例: “name=ank; user=shin; theme=dark”

必要な値を取り出すには、split() などで分割して処理します。

クッキーには有効期限を設定できます。

document.cookie = “name=; expires=Thu, 01-Jan-1970 00:00:00 GMT”;

→ 過去の日付を指定することで削除されます。