Cookie入門：JavaScript Cookieの理解と操作

Preslav Dobrev2022-10-25 · 4 min read

ブラウザクッキー、またはHTTPクッキーは、小さなデータで構成されたテキストファイルです。ウェブサイトはこの情報を使用してユーザーの行動を追跡し、ユーザーに合わせた機能を提供したり、ブラウジング体験を向上させたりします。クッキーは最大4096バイトのデータを保存できます。ただし、ブラウザによって異なりますが、ドメインごとに追加できるクッキーの数には制限があります。

HTTPクッキーに関する基本的な理解は、単に楽しむためにブラウジングしている場合でも、それを生業としている場合でも、すべてのインターネットユーザーにとって不可欠です。このガイドでは、クッキーとそのさまざまな種類について詳しく紹介します。私たちの目的は、JavaScriptクッキーを理解し、扱えるようになるのを支援することです。.

始めましょう！

前提条件

このチュートリアルを進めるには、以下が必要です。

基本的なJavaScriptの理解.

JavaScriptクッキーを始める

を扱うことは、JavaScriptクッキー非常に簡単です。これにより、クッキーの作成、編集、取得を簡単に行うことができます。さらに、Documentオブジェクトのcookieプロパティを使用して、名前、値、長さなどのクッキーのプロパティを操作および制限することができます。

クッキーの種類

まず、さまざまな種類のクッキーを見てみましょう。

ファーストパーティクッキー

これらのクッキーは、ユーザーがウェブサイトを訪問するたびに作成され、保存されます。これにより、ウェブサイトの所有者はユーザーのデータに関する詳細なインサイトを得ることができ、より良いブラウジング体験を提供できます。

永続クッキー

この種類のクッキーには、発行者が有効期限を割り当てます。そのため、より長い期間使用されます。つまり、ブラウザを閉じてもクッキーはブラウザに残ります。また、クッキーを作成したウェブサイトを訪問するたびに、データが発行者に返送されます。

セッションクッキー

これらのクッキーは一時的なものであり、ブラウザが開いている間だけブラウザのメモリに保存されます。ブラウザを閉じると、クッキーはブラウザの履歴から削除されるため、セキュリティリスクが低くなります。有効期限を指定する必要はありません。

サードパーティクッキー

サードパーティクッキーは、現在訪問していないサイトによって作成されます。主に、これらのクッキーは、広告をクリックしたユーザーを追跡し、そのユーザーをリファラー元のドメインに関連付けるのに役立ちます。

クッキーの作成

クッキーは次の2つの方法で作成できます。

送信する： Set-Cookie（ HTTP レスポンスヘッダー内）。ウェブサーバーに使用される技術に応じて、ツールやライブラリを使用してクッキーヘッダーを管理できます。クッキーには、有効期限などの情報や、secureディレクティブやHttpOnlyフラグなどのセキュリティ機能を含めることができます。

HttpOnly: ブラウザがクッキーを読み取ったり変更したりできないことを示します。
Secure: クッキーがHTTPS経由でのみ送信できることを示します。

JavaScriptの document.cookie プロパティを使用して、クッキーの作成、読み取り、削除を行うことができます。

ステップ 1 — クッキーの作成

次に、JavaScriptクッキーを作成するプロセスを示します。クッキーは名前と値のペアの形式で保存されます。

document.cookie = "UserName = CloudSigma";

1	document.cookie = "UserName = CloudSigma";

上記のクッキーでは、 UserName がクッキーの名前であり、 CloudSigma はそこに保存されている値です。

クッキーには有効期限があります。デフォルトでは、ブラウザを閉じると自動的に削除されます。クッキーに有効期限を追加することもできます。

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC";
document.cookie = "UserName = CloudSigma";

document.cookie = "UserName = CloudSigma";

expires=Fri, 11 Jun 2022 12:00:00 UTC";

document.cookie = "UserName = CloudSigma";

デフォルトでは、クッキーは現在のページに属します。ただし、 path パラメータを使用してクッキーを指定することもできます。

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

1 2	document.cookie = "UserName = CloudSigma"; expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

Cookie Max-Age と Cookie Expire

ニーズに応じて、これら2つの戦略を使用してクッキーの有効期限を設定できます。両者の違いは、 expires がクッキーが削除される有効期限を設定するのに対し、 max-Age は、クッキーが削除されるまでの時間を秒単位で設定します。残念ながら、 max-age はすべてのブラウザでサポートされているわけではありません。

以下を使用したクッキー設定の例： expires および max-age:

Expires:

var d = new Date();
d.setTime(d.getTime() + 5*60*1000); // ミリ秒単位
document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

var d = new Date();

d.setTime(d.getTime() + 5*60*1000); // ミリ秒単位

document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

Max-age :

document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

1	document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

ステップ 2 — クッキーの読み取り

The document.cookie 属性は文字列を返します。2つ以上のクッキーがある場合は、セミコロン（ ;）とスペースを使用してそれらを区切ります。

クッキーのリストから個々のクッキーを抽出するには、 split() メソッドを使用します。このメソッドは、リストを個々の名前と値のペアに分解します。完了したら、読み取りたいターゲットクッキーを検索できます。

function setCookie(name, count, validityCheck) {
    var cookie = name + "=" + encodeURIComponent(value);
    if(typeof validityCheck === "number") {
        cookie += "; max-age=" + (validityCheck*24*60*60);
        document.cookie = cookie;
    }
}

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if(name == cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
    }
}
    return null;
}

function checkCookie() {
    var UserName = getCookie("UserName");
    if(UserName != "") {
    alert("お帰りなさい、" + UserName);
} else {
    firstName = prompt("ユーザー名を入力してください:");
        if(UserName != "" && UserName != null) {
            setCookie("UserName", UserName, 30);
        }
    }
}

function setCookie(name, count, validityCheck) {

var cookie = name + "=" + encodeURIComponent(value);

if(typeof validityCheck === "number") {

cookie += "; max-age=" + (validityCheck*24*60*60);

document.cookie = cookie;

}

function getCookie(name) {

var cookieArr = document.cookie.split(";");

for(var i = 0; i < cookieArr.length; i++) {

var cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {

return decodeURIComponent(cookiePair[1]);

}

return null;

}

function checkCookie() {

var UserName = getCookie("UserName");

if(UserName != "") {

alert("お帰りなさい、" + UserName);

} else {

firstName = prompt("ユーザー名を入力してください:");

if(UserName != "" && UserName != null) {

setCookie("UserName", UserName, 30);

}

コード内で作成した関数について理解しましょう：

関数名	説明
setCookie()	クッキーを作成する
getCookie()	クッキーの値を読み取る
checkCookie()	Verifies whether the UserName が設定されているかどうかを確認します。

次のステップでは、クッキーを更新する方法を学びます。

ステップ 3 — クッキーの更新

クッキーの属性に新しい値を設定できます。この例では、ユーザーのサブスクリプションを月間プランから四半期プランに更新してみましょう。

Let’s update the max-age 属性を、 UserName クッキーについて30日から180日に更新してみましょう：

document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60;
document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

1 2	document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60; document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

ステップ 4 — クッキーの削除

同じ名前でクッキーを再定義すると、削除したいクッキーが削除されます。クッキーを削除するには、 max-age 属性を以下に設定します： 0:

document.cookie = "UserName=; max-age=0";

1	document.cookie = "UserName=; max-age=0";

さらに、クッキーに特定のパスが指定されている場合は、それを指定して削除します：

document.cookie = "Username = ExcellentDesign; Path = /";

1	document.cookie = "Username = ExcellentDesign; Path = /";

まとめ

クッキーは、ウェブサイトが適切に動作し機能するために必要不可欠です。この入門チュートリアルでは、クッキーとそのさまざまな種類について詳しく説明しました。さらに、具体的な例を用いてクッキーの操作方法を学びました。JavaScriptのクッキーの扱いに慣れたところで、このトピックについてさらに学び、理解を深めるために、独自のクッキーを作成してみましょう。

さらに、JavaScriptやウェブ開発に関する多くのチュートリアルを探索できる、当サイトのブログ:

ハッピーコンピューティング！

Preslav Dobrev

著者 · CloudSigma

Preslav DobrevはCloudSigmaのクリエイティブデザイナーであり、従来型および革新的なマーケティングチャネルを活用した一貫性のあるビジネスアイデンティティに注力しています。彼は芸術的なビジョンと戦略的マーケティングを融合させ、インパクトのあるブランドナラティブを生み出すことに長けています。