JavaScript と jQuery を使用して Cookie を作成、読み取り、削除する

Neha Imran 2023年10月12日

jQuery jQuery Cookie

クッキーとは
JavaScript を使用して Cookie を作成、読み取り、削除する
jQuery を使用して Cookie を作成、読み取り、削除する

JavaScript と jQuery を使用して Cookie を作成、読み取り、削除する

この記事は、ブラウザの Cookie に関するものです。 Cookie とそのさまざまなプロパティについて知っておくべきことをすべて学びます。

後で、JavaScript と jQuery を使用して、Cookie の作成、読み取り、および削除を行います。

クッキーとは

Cookie は、データを含むコンピューター上のテキストファイルです。 Web サーバーは、Web ページをブラウザーに送信した後、接続を終了し、ユーザーを完全に忘れます。

ユーザー情報を記憶する方法は、Cookie が対処するために作成された課題でした。

Cookie は、次回の Web サイト訪問のために、ユーザーの名前またはユーザー ID を記憶します。 Cookie は、キーと値のペアで作成および取得されます。

オンラインストアについて言えば、ユーザーが長い時間をかけて選択した後にサインインせずにカートにアイテムを追加した場合、データベースはデータを保存しません。

ユーザーがブラウザーを終了して同じページを再度開くと、カートが空になり、ユーザーを悩ませる可能性があります。その後、Cookie が介入して、ユーザー情報を保存し、現在の状態を維持することで問題を解決します。

Web サイトで使用可能な Cookie を確認するには、Inspect に移動するか、Ctrl+Shift+I を押します。次に、アプリケーションタブに移動します。

Storage の下に Cookies セクションが表示されます。次のようになります。

クッキー構造

ここには複数のフィールドが表示されます。これらは Cookie の属性です。

これらの各属性を詳しく見てみましょう。

名前 - クッキーの名前です。
Value - Cookie の値です。
ドメイン - これはあなたのウェブサイトのドメインです。
パス - これは、Cookie が設定された Web ページまたはディレクトリの URL です。任意のディレクトリまたはページから Cookie を取得する場合は、空白のままにします。
Expires/Max-Age - これは Cookie の有効期限であり、その後 Cookie は削除されます。
サイズ - クッキーのサイズです。
HttpOnly - HttpOnly 属性を持つ Cookie は、JavaScript Document.cookie では使用できません。サーバーにのみ配信されます。
Secure - このフィールドに "secure" という単語が含まれている場合、Cookie は安全なサーバーでのみアクセスできます。このフィールドが空のままの場合、そのような制限はありません。
SameSite - この機能により、サーバーはクロスサイトリクエストで Cookie を送信するかどうかを宣言できます。これにより、クロスサイトリクエストフォージェリ攻撃 (CSRF) のリスクが軽減されます。このパラメーターには、Strict、Lax、None の 3つのオプションがあります。
Partition Key - ブラウザーのトップレベル URL は、Cookie を Cookie のパーティションキーとして機能するように設定する要求をエンドポイントに最初に送信したときにオンでした。
Priority - Cookie の優先度により、サーバーは優先度の低い古い Cookie を削除し、優先度の高い古い Cookie をより長く保持できます。

JavaScript を使用すると、当社の Web サイトでの Cookie の設定、読み取り、および消去が非常に簡単になります。 Document プロパティ cookie を使用して、ドキュメントに関連する Cookie を読み書きできます。

これは、Cookie 値のゲッターおよびセッターとして機能します。

クッキーを作成する

document.cookie を使用して JavaScript で Cookie を作成し、それにキーと値のペアを割り当てることができます。

document.cookie = 'title=developer; expires=Mon, 21 Nov 2022 12:00:00 UTC;';

上記のステートメントを実行すると、ブラウザーに Cookie が作成されます。キーと値のペアで各値を指定したことに注意してください。

また、有効期限を設けておかないと、ブラウザを閉じる際にクッキーが削除されてしまうため、有効期限を設けております。クッキーの主な目的は情報を保存することなので、有効期限について言及する必要があります。

ブラウザでクッキーを見てみましょう。

クッキーを作成

出力に示されているように、指定されたキーと値を持つ Cookie が作成されます。 1つの Web サイトで、キーと値のペアが異なる複数の Cookie を作成できます。

各 Cookie は、さまざまな情報を保存するために使用できます。

3つの Cookie を作成するとします。 1つは name、2 番目は age、3 番目は人の gender に関する情報を保持します。以下のコードを確認してください。

document.cookie = 'name=John; expires=Mon, 21 Nov 2022 12:00:00 UTC';
document.cookie = 'Age=25; expires=Mon, 21 Nov 2022 12:00:00 UTC';
document.cookie = 'Gender=Male; expires=Mon, 21 Nov 2022 12:00:00 UTC';

これらのステートメントは、ブラウザーに 3つの Cookie を作成します。以下の出力を見てください。

複数の Cookie

document.cookie ステートメントを使用して、必要な数の Cookie を作成できます。しかし、このフレーズを繰り返し書くのは単調に聞こえるので、一般的なメソッドを作成しましょう。

以下のコードに従って、Cookie を生成する関数を作成します。

function createCookie(name, value, ex_days) {
  if (ex_days) {
    const date = new Date();
    date.setTime(date.getTime() + (ex_days * 24 * 60 * 60 * 1000));
    var expires = 'expires=' + date.toUTCString();
  } else {
    var expires = '';
  }
  document.cookie = name + '=' + value + ';' + expires + ';';
}

関数 createCookie は 3つの引数を受け取ります。まずは名前です。

それが鍵であると推測できます。 2 番目は value で、3 番目は有効期限です。

この関数は createCookie("CookieKey", "CookieValue", 50) のように呼び出すことができます。 CookieKey という名前の Cookie を作成し、その値として CookieValue を設定します。

有効期限は、現在の日付から 50 日後に設定されます。

クッキーを読む

JavaScript を使用すると、Web サイトに設定した Cookie をすばやく読み取ることができます。 Cookie はキーと値のペアで保存されるため、Cookie にアクセスするときにキーと値のペアを取得します。

Cookie を読み取る方法については、以下のコードを参照してください。

document.write(document.cookie);

上記のコードでわかるように、コマンド document.cookie を使用して、ウェブサイトで利用可能なすべての Cookie を取得します。

作成したすべての Cookie を取得しましょう。以下の出力を見てください。

クッキーを読む

前述のように、すべての Cookie はキーと値のペアとして取得されます。クッキーを読むのは簡単です。

それでは、いくつかの驚くべきものについて深く掘り下げてみましょう。 document.cookie ステートメントは、Web サイトの Cookie のリストを提供しますが、特定の Cookie を読みたい場合はどうすればよいでしょうか?

1つの Cookie を読み取る方法を学びましょう。それは簡単です。指定された Cookie を取得する関数を作成します。

以下のコードを確認してください。

function getCookie(cookie_name) {
  let name = cookie_name + '=';
  let cookie_array = document.cookie.split(';');
  for (let i = 0; i < cookie_array.length; i++) {
    let cookie = cookie_array[i];
    while (cookie.charAt(0) == ' ') {
      cookie = cookie.substring(1);
    }
    if (cookie.indexOf(name) == 0) {
      return cookie.substring(name.length, cookie.length);
    }
  }
  return '';
}

Cookie の作成 セクションで作成した 3つの Cookie でこのコードをテストします。 getCookie 関数について混乱するかもしれません。

心配しないで。コードの各行を詳しく説明すると、この方法を明確に理解できます。

Cookie 名を関数に渡し、指定された Cookie の詳細をその名前で取得します。
キーと値のペアで Cookie に情報を保存します。名前を値とともに保存する場合は、Name="CookieName" と記述します。 Cookie を取得すると、同じ値が得られます。
まず、指定した Cookie 名に = を追加して検索する必要があります。コードの最初の行で同じことを行いました。
次に、Cookie 配列を走査して必要な Cookie を見つける必要があります。 document.cookie を介してすべての Cookie を取得するとします。配列ではなく文字列を受け取ります。

したがって、document.cookie.split(';') を使用して配列を取得します。次の配列を取得します。
次のステップでは、配列内の各 Cookie をトラバースする for ループを作成しました。すべての Cookie を cookie 変数に格納して操作を実行します。
for ループ内の while ループが重要です。余分なスペースが存在する場合、現在の Cookie からスペースを削除しています。

上記の配列を見ると、Age Cookie と Gender Cookie の両方に空白があります。 while ループは、これらの余分な空白を削除します。
最後に、JavaScript の indexOf() メソッドを使用しました。これにより、特定のパラメーターが最初に出現したインデックスが得られます。 Cookie の名前をパラメーターとして渡し、インデックスがゼロに等しいかどうかを確認すると、必要な Cookie が見つかりました。

クッキーを削除する

JavaScript を使用すると、Cookie を簡単に削除できます。 Cookie の有効期限を以前の日付に設定すると、Cookie は自動的に破棄されます。

Cookie を作成したときに有効期限を指定しなかった場合でも、終了日の値を以前の時間に変更することで削除できます。

私たちのブラウザには現在、年齢、性別、名前の 3つの Cookie があります。 Gender Cookie を削除しましょう。

次のコマンドは、Gender Cookie を作成しました。

document.cookie = 'Gender=Male; expires=Mon, 21 Nov 2022 12:00:00 UTC';

2022 年 11 月 21 日 に有効期限が切れるように設定されています。日付を現在の日付より前の日付に変更すると、Cookie が削除されます。

有効期限を2000 年 1 月 1 日に設定したとします。ブラウザで利用できる Cookie を見てみましょう。

クッキーを削除

これまで、JavaScript を使用して Cookie を作成、読み取り、および削除する方法について説明してきました。このセクションでは、jQuery を使用して同じ 3つの機能について説明します。

JavaScript ライブラリ jQuery を使用すると、JavaScript を非常に簡単に使用できます。

jQuery の仕組みと、Cookie の作成、読み取り、および削除において JavaScript よりも使いやすい方法について説明します。 jquery-cookie ライブラリを使用して、Cookie の操作を作成および実行します。

クッキーを作成する

jQuery の cookie ライブラリは、名前と値を指定して Cookie を作成する cookie() メソッドを提供します。

構文：

$.cookie('name', 'value', {settings});

このメソッドには 3つのパラメーターがあります。

Name - これは Cookie のキーです。
Value - これは Cookie の値です。
Settings - これは、追加の Cookie パラメータを指定するために使用できるオブジェクトです。

以下のコードをチェックして、jQuery が Cookie を作成する方法を確認してください。

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
        <script>
            $.cookie("Title","Developer");
        </script>
    </head>
    <body></body>
</html>

出力：

jquery 作成 Cookie

Title という名前と Developer という値の Cookie が作成されました。この Cookie の有効期限は指定されていません。出力からわかるように、Expires 列には有効期限が記載されていません。

次に、作成した Cookie の有効期限を設定します。方法は次のとおりです。

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
        <script>
            $.cookie("Title", "Developer", { expires: 20 });
        </script>
    </head>
    <body></body>
</html>

出力：

クッキーの有効期限

有効期限を 20 に設定したため、Expires列に有効期限が表示されます。これは、この Cookie が現在から 20 日後に期限切れになることを意味します。

クッキーを読む

JavaScript とは対照的に、jQuery を使用すると Cookie の読み取りが簡単になります。 JavaScript では、特定の Cookie を読み取る関数を作成する必要がありました。

ただし、jQuery には、名前を引数として渡すだけで必要な Cookie を読み取ることができる組み込み関数があります。

メソッド $.cookie("CookieName") は、特定の Cookie を読み取るために使用されます。以下のコードを見てください。

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
        <script>
            var cookie = $.cookie("Title");
            document.write(cookie);
        </script>
    </head>
    <body></body>
</html>

Title をパラメーターとして関数に渡しました。これは、作成した Cookie の名前です。 Developer という値を返す必要があります。

出力を見てください。

クッキーを読む

クッキーを削除する

jQuery の使いやすさという点では、Cookie を名前で削除する removeCookie() というメソッドがあります。 JavaScript には、Cookie を消去する組み込み関数がありません。

それらを削除するには、有効期限を以前の日付に設定する必要があります。クッキーを削除するための以下のコードを見てください。

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
        <script>
            $.removeCookie("Title");
        </script>
    </head>
    <body></body>
</html>

クッキーとは

JavaScript を使用して Cookie を作成、読み取り、削除する

クッキーを作成する

クッキーを読む

クッキーを削除する

jQuery を使用して Cookie を作成、読み取り、削除する

クッキーを作成する

クッキーを読む

クッキーを削除する

関連記事 - jQuery Cookie