Cookieの使い方【どうやったら使えるんですか？】

2024年5月25日 11:26

はじめに

以前Cookieについてまとめましたが、具体的な使い方までは書けなかったので、今回は主にJavaScriptでCookieを扱う方法についてまとめていきます。

Cookieのおさらい

以前の記事でも紹介しましたが、CookieとはWeb体験を快適にするために用いられている機構です。

以下の様なことが可能です。
・ログインによるセッションを維持。
・買い物のカート情報を保つ。
・訪問者がそのページに何回訪れたかを記録して表示。
・ユーザーの趣味嗜好に沿った広告、コンテンツを提供。

1.使い方の基本

Cookieの構造
ここでは、基本的な使い方についてみていきます。
Cookieはキーと値のペアとして保存されます。例えば以下の様な形式です。

username=JohnDoe; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/;

ここで重要な属性としては、
・'username = JohnDoe' ：Cookieのキーと値
・'expires'：Cookieの有効期限
・'path'：Cookieが有効なパス

2.JavaScriptでCookieを設定する

①シンプルなCookieの設定
以下のコードは、シンプルなCookieを設定する例です。

<JavaScript>
document.cookie = "username=JohnDoe";

②有効期限の設定
Cookieで有効期限を設定するには、'expires'属性を使用します。ここではGMT形式の日付を指定します。

<JavaScript>
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'属性を使用します。

<JavaScript>
document.cookie = "username=JohnDoe; path=/";

④セキュリティ属性の設定
・Secure：HTTPS接続の時のみCookieを送信する。
・HttpOnly：JavaScriptからアクセスできないようにし、クロスサイトスクリプティング(XSS)攻撃を防ぐ。

<JavaScript>
document.cookie = "username=JohnDoe; path=/; Secure; HttpOnly";

ここまでがCookieの設定・書き込みの基本的な使い方です。

JavaScriptでCookieを読み取る

JavaScriptでCookieを読みとるには、'document.cookie'を使用します。これは全てのCookieを1つの文字列として返します。
そして必要なCookieを取得するために、文字列を解析する必要があります。

<JavaScript> //全てのCookieを取得
console.log(document.cookie);

特定のCookieを取得する方法

<JavaScript>
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'属性を過去の日付に設定します。

<JavaScript>
document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

これにより、指定されたパス上の'username'Cookieは削除されます。

発展

①Json形式のデータを保存する
Cookieは基本的に文字列しか保存できませんが、Json.stringify()とJson.parse()を＜使用することで、オブジェクトを保存できます。

<JavaScript>
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個程度に制限されています。
これ以上データの保存をする場合は、ローカルストレージやセッションストレージの使用を検討する必要があります。

まとめ

JavaScriptのCookie操作は、基本的な設定・取得・削除からJson形式のデータ保存やセキュリティ属性の設定など多岐にわたります。

Web開発において非常に便利な機能ですが、プライバシーに配慮した適切な使用が開発者には求められます。

特に、ユーザーの個人情報やセキュリティに関わるデータを扱う際には、セキュリティ属性を設定し、安全な通信経路を確保することが重要です。

私自身Cookieの操作については、まだまだ未熟なのでアウトプットを通じて安全に活用できるようにしていきたいです。

更新の励みになりますので、読んでみて少しでもよかったら、スキ・コメント・サポート宜しくお願い致します!!

記事がよければサポートお願いします！