以前Cookieについてまとめたことがありましたが、具体的な使い方までは紹介できていませんでした。
なので今回は、JavaScriptでCookieを扱う方法についてまとめていきます。
Cookieのおさらい
以前の記事でも紹介しましたが、CookieとはWeb体験を快適にするために用いられている技術です。
Cookieを用いることでいかのようなことが可能です。
基本的な使い方
ここでは、基本的な使い方についてみていきます。
Cookieは主にキーと値のペアとして保存されます。例えば以下のような形式です。
username=JohnDoe; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/;ここで重要な属性としては、
- ‘username = JohnDoe’ ：Cookieのキーと値
- ‘expires‘：Cookieの有効期限
- ‘path‘：Cookieが有効なパス
です。
JavaScriptでCookieを設定する
それでは具体的にどんなことを設定できるのか見ていきます。
①シンプルなCookieの設定
以下のコードは、シンプルなCookieを設定する例です。
document.cookie = "username=JohnDoe";
②有効期限の設定
Cookieで有効期限を設定するには、‘expires’属性を使用します。ここではGMT形式の日付を指定します。
let now = new Date();
now.setTime(now.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7日後
let expires = "expires=" + now.toUTCString();
document.cookie = "username=JohnDoe; " + expires;
③パスを設定する
Cookieが有効なパスを指定するには‘path’属性を使用します。
document.cookie = "username=JohnDoe; path=/";
④セキュリティ属性の設定
- Secure：HTTPS接続の時のみCookieを送信
- HttpOnly：JavaScriptからアクセスできないようにし、クロスサイトスクリプティング(XSS)攻撃を防ぐ。
document.cookie = "username=JohnDoe; path=/; Secure; HttpOnly";
ここまでがCookieの設定・書き込みの基本的な使い方です。
JavaScriptでCookieを読み取る
次にCookieに保存されたデータを読み取る方法です。
JavaScriptでCookieを読みとるには、’document.cookie‘を使用します。これは全てのCookieを1つの文字列として返します。そして必要なCookieを取得するために、文字列を解析する必要があります。
console.log(document.cookie);
特定のCookieを取得するには以下のようにして取り出します。
function getCookie(name) {
let nameEQ = name + "=";
let ca = document.cookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
// 使用例
let username = getCookie("username");
console.log(username);
JavaScriptでCookieを削除する
最後に保存されたCookieを削除する方法です。Cookieを削除するには、‘expires’属性を過去の日付に設定します。
document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";これにより、指定されたパス上の’username‘Cookieは削除されます。
発展
Json形式のデータを保存する
Cookieは基本的に文字列しか保存できませんが、Json.stringify()とJson.parse()を使用することで、オブジェクトを保存できます。
let user = {
name: "JohnDoe",
email: "john@example.com"
};
// オブジェクトをJSON文字列に変換して保存
document.cookie = "user=" + JSON.stringify(user) + "; path=/";
// JSON文字列をオブジェクトに変換して取得
function getCookie(name) {
let nameEQ = name + "=";
let ca = document.cookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
let userCookie = getCookie("user");
if (userCookie) {
let userObj = JSON.parse(userCookie);
console.log(userObj.name); // "JohnDoe"
console.log(userObj.email); // "john@example.com"
}
サードパーティークッキー
別の記事でも記述しましたが、サードパーティークッキーはユーザーが訪問しているWebサイトとは異なるドメインから設定されるCookieです。
これらは主に広告やトラッキングの目的で使用されますが、プライバシーの問題から近年はブラウザによって制限されることが増えています。
Cookieのサイズ制限
Cookieのサイズは一般に4096バイトに制限されています。また、1つのドメインに保存できるCookieの数は20個程度に制限されています。
これ以上データの保存をする場合は、ローカルストレージやセッションストレージの使用を検討する必要があります。
Cookieの使い方まとめ
JavaScriptのCookie操作は、基本的な設定・取得・削除からJson形式のデータ保存やセキュリティ属性の設定など多岐にわたります。Web開発において非常に便利な機能ですが、プライバシーに配慮した適切な使用が開発者には求められます。
特に、ユーザーの個人情報やセキュリティに関わるデータを扱う際には、セキュリティ属性を設定し、安全な通信経路を確保することが重要です。
本記事で紹介したCookieと似たような概念としてセッションというものがあります。Cookieとセッションの違いについてはこちら。
