JavaScript の Cookie に関する包括的なガイド

JavaScript の Cookie

Cookie は、Web サイトによってユーザーのブラウザに保存される小さなデータです。これらは一般に、ユーザー設定の保存、セッションの追跡、またはリクエスト間の状態の維持に使用されます。

JavaScript は Cookie を作成、読み取り、削除するための簡単なメソッドを提供しており、クライアント側のストレージとセッション管理に不可欠なツールとなっています。

1. Cookieの設定

Cookie は、document.cookie に文字列を割り当てることによって作成されます。

構文:

document.cookie = "key=value; expires=DATE; path=PATH; domain=DOMAIN; secure; SameSite=VALUE";

• key=value: Cookie のキーと値のペア。
• expires: 有効期限日 (オプション)。設定されていない場合、Cookie はセッション Cookie となり、ブラウザを閉じると削除されます。
• パス: Cookie にアクセスできるサイト内のパス (デフォルト: 現在のパス)。
• ドメイン: Cookie がアクセス可能なドメイン (デフォルト: 現在のドメイン)。
• 安全: Cookie は HTTPS 経由でのみ送信されます。
• SameSite: クロスサイトの動作を制御します (厳密、緩い、またはなし)。

例:

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

2.クッキーを読む

document.cookie プロパティは、現在のドメインとパスのすべての Cookie を単一の文字列として返します。

例:

console.log(document.cookie);
// Output: "username=JohnDoe; theme=dark; sessionId=abc123"

特定の Cookie を抽出するには、次の文字列を解析します。

function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (let cookie of cookies) {
    const [key, value] = cookie.split("=");
    if (key === name) return value;
  }
  return null;
}
console.log(getCookie("username")); // Output: JohnDoe

3. Cookie を更新しています

Cookie を更新するには、同じキーで異なる値またはオプションを使用して再度設定します。

例:

document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
console.log(document.cookie); // Output: "username=JaneDoe; ..."

4. Cookie を削除しています

Cookie を削除するには、その有効期限を過去の日付に設定します。

例:

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

5.特殊文字の処理

Cookie 値内の特殊文字は、encodeURIComponent を使用してエンコードし、decodeURIComponent を使用してデコードする必要があります。

例:

document.cookie = "userInfo=" + encodeURIComponent("John Doe & Admin");
console.log(decodeURIComponent(getCookie("userInfo"))); // Output: John Doe & Admin

6.セキュリティに関する考慮事項

1. 安全フラグ:
   • セキュアを使用して、Cookie が HTTPS 経由でのみ送信されるようにします。

   document.cookie = "sessionId=abc123; secure";

1. HTTPOnly Cookies:

   • JavaScript (サーバー側で設定) からはアクセスできません。

2. 同じサイト属性:

   • クロスサイト Cookie の動作を制御して、CSRF 攻撃を防ぎます。

document.cookie = "key=value; expires=DATE; path=PATH; domain=DOMAIN; secure; SameSite=VALUE";

7. Cookie 属性の概要

8. JavaScript を使用した Cookie の管理

Cookie の管理を容易にするために、一般的な操作をユーティリティ関数にカプセル化します。

例:

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

9.概要

Cookie は、Web アプリケーションの状態を維持するための基本的なツールです。適切に取り扱うことで、ユーザー データを保護しながら機能が確保されます。

• より安全な Cookie には Secure と SameSite を使用してください。
• 機密情報を Cookie に直接保存しないでください。
• JavaScript ユーティリティを使用して、Cookie の管理を簡素化します。

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がJavaScript の Cookie に関する包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。