アドテク_Cookieの書き込みと読み込み　#495

ゆーき|YM202110

2024年9月22日 09:46

WebアプリケーションにおけるCookieは、ユーザーのセッション情報や設定を保存するために広く使われています。

Cookieはクライアント（ブラウザ）に保存され、サーバーとのやり取りで利用されます。今回はそもそもCookieをどうやって書き込むのか・読み込むのか、について整理ます。

Cookieの書き込みと読み込み

書き込みと読み込みの方法として、HTTPを使う方法とJavaScriptを使う方法があります。

HTTPレスポンスでのCookie書き込み

CookieはHTTPレスポンスのSet-Cookieヘッダーを通じて書き込めます。基本的なフォーマットは以下の通りです。

Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>; Domain=<domain>; Path=<path>; Secure; HttpOnly

例えば、example.comで「user_id」という名前のCookieを書き込むには次のようにします。

Set-Cookie: user_id=12345; Domain=example.com; Path=/; Expires=Tue, 19 Jan 2038 03:14:07 GMT; Secure; HttpOnly

この場合、Cookieはexample.comドメインに設定され、サーバーからのレスポンスを受け取ったブラウザがその情報を保存します。このDomainの指定は重要な要素なので、別記事で詳細についてまとめます。

1つのHTTPレスポンスで複数のCookieをセットすることも可能です。その場合、以下のように複数のSet-Cookieヘッダーを1度に送ります。

Set-Cookie: user_id=12345; Path=/; Expires=Tue, 19 Jan 2038 03:14:07 GMT
Set-Cookie: session_token=abc123; Path=/; Expires=Tue, 19 Jan 2038 03:14:07 GMT

HTTPでのCookie読み込み

ブラウザは、同じドメインからのリクエストがあると、保存したCookieをCookieヘッダーに含めてサーバーに送信します。

Cookie: user_id=12345

サーバー側ではこのヘッダーを確認し、保存されたCookie値に基づいてユーザーを認識したり、セッション情報を処理したりします。

JavaScriptでのCookieの書き込み

JavaScriptでCookieを書き込むには、document.cookieを使います。以下の例では、user_idというCookieをJavaScriptで設定しています。

document.cookie = "user_id=12345; path=/; domain=example.com; expires=Tue, 19 Jan 2038 03:14:07 GMT; Secure";

ここでは、user_idという名前で、example.comドメインで有効なCookieを設定しています。また、expires属性でCookieの有効期限を指定し、Secure属性をつけることでHTTPS通信でのみ送信されるようにしています。

同時に複数のCookieをセットするには、以下のようにそれぞれでdocument.cookieを呼び出します。

document.cookie = "user_id=12345; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT";
document.cookie = "session_token=abc123; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT";

JavaScriptでのCookieの読み込み

JavaScriptでCookieを読み込むには再びdocument.cookieを使用しますが、この場合、全てのCookieが一つの文字列として取得されます。個々のCookieを取得するためには、分割処理が必要です。

let cookies = document.cookie.split('; ');
let userIdCookie = cookies.find(cookie => cookie.startsWith('user_id='));
if (userIdCookie) {
    let userId = userIdCookie.split('=')[1];
    console.log(userId);  // "12345"
}

このコードでは、user_idという名前のCookieを検索してその値を取得しています。

書き込みと読み込みの重要な要素である「domain」属性については、次の記事で解説します！

ここまでお読みいただきありがとうございました。

参考

この記事が気に入ったらサポートをしてみませんか？

アドテク_Cookieの書き込みと読み込み #495