Cookieをブラウザで使う方法についての紹介
以前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を読み取る
JavaScriptでCookieを読みとるには、’document.cookie‘を使用します。
これは全てのCookieを1つの文字列として返します。
そして必要なCookieを取得するために、文字列を解析する必要があります。
console.log(document.cookie);特定の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を削除するには、‘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 / エンジニア […]
[…] Cookie […]
[…] Cookie […]
[…] 2024年7月20日 matsunoki 3 […]