ホーム » Web API » JavaScriptクッキー

JavaScriptクッキー

概要：このチュートリアルでは、HTTPクッキーと、JavaScriptを使用してクッキーを効果的に管理する方法について学習します。

クッキーとは

HTTPクッキーとは、サーバーがWebブラウザに送信するデータの一部です。その後、WebブラウザはユーザーのコンピュータにHTTPクッキーを保存し、後のリクエストで同じサーバーに返送します。

HTTPクッキーは、Webクッキーまたはブラウザクッキーとも呼ばれます。そして、一般的にクッキーと呼ばれています。

たとえば、HTTPレスポンスのヘッダーは次のようになります。

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie:username=admin
...Code language: JavaScript (javascript)

HTTPレスポンスは、"username"という名前と"admin"という値を持つクッキーを設定します。サーバーは、クッキーをWebブラウザに送信するときに、名前と値の両方をエンコードします。

Webブラウザはこの情報を保存し、次のリクエストでCookie HTTPヘッダーを介してサーバーに返送します。以下に示すとおりです。

GET /index.html HTTP/1.1
Cookie: username=admin
...

クッキーの理由

HTTPはステートレスであることを理解することが重要です。サーバーに2つの連続したHTTPリクエストを送信した場合、それらの間にはリンクはありません。言い換えれば、サーバーは2つのリクエストが同じWebブラウザからのものかどうかを知ることができません。

したがって、クッキーは、2つのリクエストが同じWebブラウザからのものかどうかを判断するために使用されます。

実際には、クッキーは次の目的で使用されます。

  • セッション管理 - クッキーを使用すると、サーバーが記憶しておく必要のある情報を管理できます。たとえば、ログイン、ショッピングカートなど。
  • パーソナライズ - クッキーを使用すると、ユーザーの好み、テーマ、ユーザー固有の設定を保存できます。
  • 追跡 - クッキーは、広告でユーザーの行動を記録および分析するのに役立ちます。

クッキーの詳細

クッキーは、Webブラウザに保存される次の情報で構成されます。

  • 名前 - クッキーを識別する一意の名前。クッキー名は、大文字と小文字を区別しません。つまり、Usernameとusernameは同じクッキーです。
  • 値 - クッキーの文字列値。URLエンコードする必要があります。
  • ドメイン - クッキーが有効なドメイン。
  • パス - クッキーをサーバーに送信する必要がある、ドメインなしのパス。たとえば、https://javascripttutorial.dokyumento.jp/dom/からのみクッキーにアクセスできるように指定できます。したがって、https://www.javascripttutoiral.net/のページはクッキー情報を送信しません。
  • 有効期限 - Webブラウザがクッキーを削除するタイミング（またはブラウザがサーバーにクッキーの送信を停止するタイミング）を示すタイムスタンプ。有効期限は、GMT形式の日付として設定されます：Wdy, DD-Mon-YYYY HH:MM:SS GMT。有効期限により、ユーザーがWebブラウザを閉じた後でも、クッキーをユーザーのWebブラウザに保存できます。
  • セキュアフラグ - 指定されている場合、WebブラウザはSSL接続（https、httpではない）経由でのみサーバーにクッキーを送信します。

名前、値、ドメイン、パス、有効期限、およびセキュアフラグは、セミコロンとスペースで区切られます。例えば

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie:user=john
; expire=Tue, 12-December-2030 12:10:00 GMT; domain=javascripttutorial.net; path=/dom; secure
...

secureフラグは、名前と値のペアではない唯一の部分であることに注意してください。

JavaScriptのクッキー

JavaScriptでクッキーを管理するには、document.cookieプロパティを使用します。

1）クッキーの値を取得する

次の例では、ページで使用可能なすべてのクッキーの文字列を返します。

const str = document.cookie;Code language: JavaScript (javascript)

document.cookieは、次のようなセミコロンで区切られた一連の名前と値のペアを返します。

name1=value1;name2=value2;...

次の例は、Webページのクッキーを示しています。

"_ga=GA1.2.336374160.1600215156; dwf_sg_task_completion=False; _gid=GA1.2.33408724.1600901684"Code language: JSON / JSON with Comments (json)

すべての名前と値はURLエンコードされているため、decodeURIComponent()を使用してデコードする必要があります。

2）クッキーを設定する

クッキーに値を設定するには、次の形式でクッキーテキストを作成します。

name=value; expires=expirationTime; path=domainPath; domain=domainName; secure

…そして、それをクッキーに追加します。

document.cookie = cookieText;Code language: JavaScript (javascript)

クッキーには、名前と値のみが必要です。例えば

document.cookie = "username=admin";Code language: JavaScript (javascript)

この例では、usernameという名前で値がadminのクッキーを作成します。Webブラウザは、サーバーにリクエストを行うたびにこのクッキーを送信します。

クッキーは有効期限を指定しないため、Webブラウザが閉じられると削除されます。

クッキーテキスト"username=admin"には、エンコードする必要のある文字はありません。

ただし、クッキーを設定するときは、次のように常にencodeURIComponent()関数を使用することをお勧めします。

document.cookie = `${encodeURIComponent("username")}=${encodeURIComponent("admin")}`;Code language: JavaScript (javascript)

3）クッキーを削除する

クッキーを削除するには、同じ名前、パス、ドメイン、およびセキュアオプションを使用して、クッキーを再度設定する必要があります。また、有効期限を過去のある時点に設定する必要があります。

JavaScript Cookieクラス

次のCookieクラスは、クッキーの設定、取得、および削除を行います。

class Cookie {
  static get(name) {
    const cookieName = `${encodeURIComponent(name)}=`;
    const cookie = document.cookie;
    let value = null;

    const startIndex = cookie.indexOf(cookieName);
    if (startIndex > -1) {
      const endIndex = cookie.indexOf(';', startIndex);
      if (endIndex == -1) {
        endIndex = cookie.length;
      }
      value = decodeURIComponent(
        cookie.substring(startIndex + name.length, endIndex)
      );
    }
    return value;
  }

  static set(name, value, expires, path, domain, secure) {
    let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
    if (expires instanceof Date) {
      cookieText += `; expires=${expires.toGMTString()}`;
    }

    if (path) cookieText += `; path=${path}`;
    if (domain) cookieText += `; domain=${domain}`;
    if (secure) cookieText += `; secure`;

    document.cookie = cookieText;
  }

  static remove(name, path, domain, secure) {
    Cookie.set(name, '', new Date(0), path, domain, secure);
  }
}
Code language: JavaScript (javascript)

仕組み。

Cookieクラスには、get()、set()、およびremove()の3つの静的メソッドがあります。

1）get()メソッド

get()メソッドは、指定された名前を持つクッキーの値を返します。これを行うために、次の手順を実行します。

  • まず、document.cookieプロパティ内の等号によるクッキー名の出現を検索します。
  • 次に、クッキーが使用可能な場合、indexOf()を使用してクッキーの末尾を見つけます。これは、その位置の後の次のセミコロン（;）で指定されます。セミコロンが使用できない場合、これはクッキーが文字列の最後にあることを意味します。
  • 3番目に、decodeURIComponent()関数を使用してクッキーの値をデコードし、デコードされた値を返します。

2）set()メソッド

set()メソッドは、ページにクッキーを設定します。クッキーの作成に必要な引数を受け入れます。

set()メソッドには、最初の2つの引数（名前と値）が必要です。他の引数は必須ではありません。

set()メソッドは、クッキーテキストを作成し、それをdocument.cookieプロパティに設定します。

3）remove()メソッド

クッキーを削除するために、remove()メソッドは、有効期限が1970年1月1日に設定された状態でクッキーを再度設定します。新しいDate(0)は、日付が1970年1月1日の日付オブジェクトを返すことに注意してください。

Cookieクラスの使用

次の例は、Cookieクラスを使用して、名前がusernameで値がadminのクッキーを設定、取得、および削除する方法を示しています。

// set a cookie
Cookie.set('username', 'admin');

// get a cookie
console.log(Cookie.get('username')); // admin

// remove a cookie by a name
Cookie.remove('username');Code language: JavaScript (javascript)

Webブラウザでクッキーを表示する

Webブラウザでクッキーを表示するには、devtoolsを使用します。

  • まず、[アプリケーション]タブをクリックします。
  • 次に、[ストレージ]の下の[クッキー]ノードを選択します。

次の図は、Google.comのクッキーを示しています。

まとめ

  • クッキーは、サーバーがWebブラウザに送信するデータの一部です。その後、Webブラウザはそれをユーザーのコンピュータに保存し、後続のリクエストで同じサーバーにクッキーを返送します。
  • サーバーは、2つの連続するリクエストが同じWebブラウザからのものかどうかを識別するためにクッキーを使用します。
  • クッキーを管理するには、document.cookieオブジェクトを使用します。効率を高めるために、Cookieユーティリティクラスを使用できます。
  • encodeURIComponent()およびdecodeURIComponent()関数を使用して、クッキー値をエンコードおよびデコードします。
このチュートリアルは役に立ちましたか？
Web API
前へ
Web API
次へ
JavaScript localStorage
JavaScript localStorage