JavaScript で Cookie を設定する

1. JavaScript で Cookie を設定する
2. Cookie の有効期限を設定する
3. Cookie のパスを設定する
4. setCookie() 関数

Cookie は、クライアント側とサーバー側の間の接続を可能にする情報の一部です。 ウェブブラウザは閲覧時に保存します。

通常、Cookie には、セミコロンで区切られた 名前と値 のペアの形式のデータが文字列として含まれています。 また、Cookie はユーザーの状態を維持し、すべての Web ページでユーザーの情報を再収集します。

JavaScript を考えると、Cookie は document.cookie プロパティを使用して 作成、読み込み、更新、および 削除 できます。 Cookie は、次の構文に従って、name、value、expires、path、domain、および security の 6つのセグメントで構成されます。

構文：

document.cookie = 'name=VALUE; expires=DATE; path=PATH; domain=DOMAIN; secure';

ここでは、最初のセグメント name=VALUE の存在が不可欠であり、要件に基づいて、必要に応じてユーザーが他のセグメントを提供できます。

JavaScript で Cookie を設定する

document.cookie = 'new_cookie'

まず、上記の構文を使用して、各セグメントをスタートアップとして詳細に検討します。

1. document.cookie コマンドは、新しい Cookie を作成します。
2. ここで、new_cookie は Cookie の値を設定する文字列であり、構文は name=VALUE です。name は、Cookie が読みやすい形式で格納する内容を意味し、VALUE です。 ユーザーが優先として指定した値です。

Cookie を設定する例:

document.cookie = 'username=John Ricks';

ここでは、Cookie は名前として username と値 John Ricks で保存されます。

出力：

Cookie の有効期限を設定する

Cookie は、コードに設定されたユーザーの有効期限に基づいて自動的に期限切れになります。 有効期限が設定されていない場合、ユーザーがブラウザーを閉じたときに Cookie が削除され、ユーザーが Web ページにアクセスするときに Cookie の値を再利用できなくなります。

以下の例のように、セミコロンで区切られた時間基準である UTC (Universal Time Coordinated) に expires=DATE を追加するだけで Cookie の有効期限を設定することで、この問題を無効にすることができます。

document.cookie = 'username=John Ricks; expires=Wed, 31 Aug 2022 21:00:00 UTC';

出力：

Cookie のパスを設定する

path パラメーターを使用すると、ユーザーはブラウザーに、Cookie がディレクトリまたは Web ページ内のどのパスに属しているかを伝えることができます。 デフォルトでは、Cookie はユーザーがアクセスした現在のページに属します。

ディレクトリまたは Web ページから Cookie を取得すると、このパスは空白になる場合があります。 このパラメーターは、Cookie がユーザーのマシンに保存される場所を変更します。機密情報を保存する場合に役立ちます。これは、見つけるのが難しいためです。

以下のコードのように、path を Cookie に追加できます。

document.cookie =
    'username=John Ricks; expires=Wed, 31 Aug 2022 21:00:00 UTC; path=/'

出力：

また、必要に応じて、Cookie を設定する際に ドメイン と セキュリティ を追加することができます。 ドメインを追加する目的は、他のサブドメインへの Cookie を許可することです。

安全な部分はブール値で、デフォルト値は false の空白フィールドです。 Cookie が安全であるとマークされている場合、値は true であるため、Cookie は Web サーバーに送信され、安全な通信チャネルでのみ取得できます。

setCookie() 関数

Cookie の値をハードコーディングすることなく、JavaScript 関数を使用して Cookie の値を設定できます。 以下のコードは setCookie() 関数を定義しています。

let username = 'John Ricks';

// To set a cookie
function setCookie(cookie_name, cookie_value, expire_date) {
  const c_d = new Date();  // current date
  c_d.setTime(c_d.getTime() + (expire_date * 24 * 60 * 60 * 1000));
  let expires = 'expires=' + c_d.toUTCString();
  document.cookie =
      cookie_name + '=' + cookie_value + '; ' + expires + '; path=/';
}
// to apply setCookie
setCookie('username', username, 20);

出力：

この関数は、名前 username、値 John Ricks、有効期限が生成されてから 20 日の Cookie を作成します。

同様に、getCookie() 関数を作成することで JavaScript 関数を使用して Cookie を取得できます。また、必要に応じて Cookie を更新または削除することもできます。