クッキー Javaスクリプト: 設定、取得、削除の例
ジェームズ・ハートマン
⚡ スマートサマリー
クッキー Javaスクリプトは、ステートレスなHTTP接続が情報を記憶できるように、訪問者のコンピュータに小さなキーと値のペアを保存します。この記事では、Cookieの設定、読み取り、削除方法、すべてのCookie属性の説明、Cookieとブラウザのストレージ代替手段との比較について説明します。
What are Cookies?
Cookieとは、ブラウザがアクセスできるようにコンピュータに保存されるデータのことです。あなたは知らず知らずのうちに、Cookieの恩恵を受けているかもしれません。Facebookなどのサイトにログインしたままにして、毎回ログイン情報を入力する手間を省いたことはありませんか？もしそうなら、あなたはCookieを利用していることになります。Cookieはキーと値のペアとして保存されます。
重要な補足説明：クッキーにはパスワードは保存されません。クッキーにはセッション識別子、つまりログイン成功後にサーバーが発行するランダムなトークンが保存されます。サーバーはこのトークンをあなたのアカウントと照合するため、パスワード自体がサーバーから外部に送信されることはありません。
なぜ Cookie が必要なのでしょうか?
間のコミュニケーション ウェブブラウザ サーバーはHTTPというステートレスプロトコルを使用して通信を行います。ステートレスプロトコルは各リクエストを独立して処理します。そのため、サーバーはブラウザにデータを送信した後、そのデータを保持しません。しかし、多くの場合、データは再び必要になります。そこでクッキーが登場します。クッキーを使用することで、Webブラウザはデータが必要になるたびにサーバーと通信する必要がなくなり、コンピュータから直接データを取得できるようになります。
一般的な用途としては、サインインしたセッションを記憶したり、言語やテーマの設定を保存したり、ping 店内の商品ping ページ間の移動におけるバスケットの表示、および初回訪問者とリピーターのカウント。
Javascript クッキーを設定する
document.cookie プロパティを使用すると、次のようにしてクッキーを作成できます。
document.cookie = "cookiename=cookievalue"
クッキーに有効期限を設定することもできます。これにより、指定した日付に特定のクッキーがコンピュータから削除されます。有効期限はUTC/GMT形式で設定する必要があります。有効期限を設定しない場合、ユーザーがブラウザを閉じるとクッキーは削除されます。
document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC"
ドメインとパスを設定することで、クッキーがどのドメインに属し、そのドメイン内のどのディレクトリに属するかを指定することもできます。デフォルトでは、クッキーはクッキーを設定したページに属します。
document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC; path=/ "
//現在のページのドメインと、そのドメイン全体をカバーするパスを持つクッキーを作成します。
⚠️ 警告: 有効期限は未来の日付でなければなりません。既に過ぎた日付を指定すると、ブラウザはクッキーを即座に削除するように指示されます。これは、以下の削除セクションで使用されている手法と全く同じです。
Javaスクリプトでクッキーを取得
このようにすれば、現在のドメインに保存されているすべてのクッキーを取得できます。
var x = document.cookie
返される値は、次の形式の単一の文字列です。 name1=value1; name2=value2名前でクッキーを読み取る組み込みメソッドはないため、文字列を分割する必要があります。以下のヘルパー関数は、単一の値と、名前がない場合は空の文字列を返します。
function getCookie(name) { const pairs = document.cookie.split(";"); for (let i = 0; i < pairs.length; i++) { const pair = pairs[i].trim(); if (pair.indexOf(name + "=") === 0) { // decode in case the value contained spaces or symbols return decodeURIComponent(pair.substring(name.length + 1)); } } return ""; } document.cookie = "username=Ann Smith; path=/"; console.log(getCookie("username")); console.log(getCookie("missing") === "");
出力：
Ann Smith true
Javaスクリプト削除Cookie
Cookieを削除するには、Cookieの値を空に設定し、expiresの値を既に過ぎた日付に設定するだけで済みます。
document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"
削除が失敗する原因のほとんどは、ある一つの点にあります。ブラウザは、クッキーをその名前、パス、ドメインで識別するため、削除ステートメントには、クッキーが作成されたときに使用されたパスとドメインをそのまま記述する必要があります。
// created with an explicit path document.cookie = "theme=dark; path=/; max-age=2592000"; // deletion must repeat that same path document.cookie = "theme=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT"; // max-age=0 achieves the same result in one shorter line document.cookie = "theme=; path=/; max-age=0";
クッキー属性の説明
最初のセミコロン以降の属性はすべて、クッキーの有効期間、クッキーを送信するリクエスト、およびクッキーを読み取ることができるコードを変更します。以下のリファレンスには、それらすべてが網羅されています。
| 属性 | 目的 | 例: |
|---|---|---|
| 有効期限が切れます | UTC形式での絶対削除日時 | expires=2031年8月21日(木) 20:00:00 UTC |
| 最大年齢 | 今から数えた生涯（秒単位） | max-age = 2592000 |
| path | ドメイン内のディレクトリスコープ | パス=/ |
| ドメイン | ホスト範囲（サブドメインを含む） | ドメイン=example.com |
| セキュアー | HTTPS接続でのみ送信されます | セキュアー |
| HTTPのみ | document.cookieには表示されず、サーバーによってのみ設定されます。 | HTTPのみ |
| 同じサイト | クロスサイトリクエストの送信を制御する | 同じサイト=緩い |
SameSiteは、ブラウザがデフォルト値を適用するようになったため、特に注意が必要です。受け入れられる3つの値は、以下のように動作します。
- 厳密： リクエストが別のサイトから発信された場合、クッキーは決して送信されません。これは、バンキングセッションにとって最も安全な設定です。
- ラックス： Cookieは、リンクをクリックするなどのトップレベルのナビゲーション操作には伴いますが、サイトをまたぐ画像やフレームには伴いません。これは最新のブラウザのデフォルト設定です。
- なし： Cookieはすべてのクロスサイトリクエストで送信され、Secure属性と組み合わせる必要があります。そうでない場合、ブラウザはそれを拒否します。
// a well configured cookie set from client side script document.cookie = "language=en; path=/; max-age=31536000; SameSite=Lax; Secure";
💡ヒント: HttpOnly属性は適用できません Javaスクリプトによる設定です。サーバー応答ヘッダーのみが設定できるため、セッションクッキーはクロスサイトスクリプティング攻撃から保護されます。
この例を自分で試してみてください
以下のスクリプトは、これら3つの操作をすべて組み合わせたものです。有効期限を日数で指定したクッキーを作成し、名前でそのクッキーを読み込み、再訪問者に挨拶メッセージを表示します。 コードを正しく動作させるための特別な手順…実行ボタンを2回押してください。
<html>
<head>
<title>Cookie!!!</title>
<script type="text/javascript">
function createCookie(cookieName,cookieValue,daysToExpire)
{
var date = new Date();
date.setTime(date.getTime()+(daysToExpire*24*60*60*1000));
document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
}
function accessCookie(cookieName)
{
var name = cookieName + "=";
var allCookieArray = document.cookie.split(';');
for(var i=0; i<allCookieArray.length; i++)
{
var temp = allCookieArray[i].trim();
if (temp.indexOf(name)==0)
return temp.substring(name.length,temp.length);
}
return "";
}
function checkCookie()
{
var user = accessCookie("testCookie");
if (user!="")
alert("Welcome Back " + user + "!!!");
else
{
user = prompt("Please enter your name");
num = prompt("How many days you want to store your name on your computer?");
if (user!="" && user!=null)
{
createCookie("testCookie", user, num);
}
}
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>
期待される動作:
First run : "Please enter your name" -> Ann
"How many days you want to store your name on your computer?" -> 5
Second run : alert box shows Welcome Back Ann!!!
Code 説明： createCookie 関数は、日数をミリ秒に変換し、現在時刻に加算して有効期限を生成します。accessCookie 関数は、Cookie 文字列をセミコロンで分割し、各断片を切り取り、断片の開始位置を要求された名前と比較します。checkCookie 関数は、ページ読み込み時にこの 2 つの処理を統合します。
⚠️ 警告: この例では toGMTString()これは非推奨のエイリアスです。新しいコードでは、 を呼び出す必要があります。 toUTCString() その代わりに、非推奨の形式は最終的にブラウザから削除される可能性がある。
Cookie、localStorage、sessionStorageの比較
Cookieはブラウザがデータを保存できる唯一の場所ではありません。Webストレージには2つのオプションがあり、適切なオプションを選択することで、リクエストごとに不要なバイトを送信することを避けることができます。
| 機能 | Cookie | ローカルストレージ | セッションストレージ |
|---|---|---|---|
| 容量 | 約4KB | 約5MB | 約5MB |
| サーバーに送信されました | はい、マッチングリクエストごとに | いいえ | いいえ |
| 生涯保証 | 有効期限まで | 明示的に削除されるまで | タブが閉じるまで |
| サーバーはそれを書き込むことができます | はい | いいえ | いいえ |
| タブ間でアクセス可能 | はい | はい | いいえ |
| 典型的な使用 | セッションと認証 | 設定とキャッシュされたデータ | 1回訪問フォームの状態 |
実用的なルールはシンプルです。サーバーがその値を必要とする場合は、Cookieを使用します。ページだけがその値を必要とする場合は、localStorageまたはsessionStorageを使用します。これらの値はネットワークリクエストの負荷を増やすことがないためです。
Cookie処理コードは通常、複数のページで共有されているため、確認が必要です。 内部と外部 Javaスクリプト どこに配置するかを決める前に。ここで使用されている弦分割は、 Javaスクリプト文字列 (NAIST) と Javaスクリプト配列メソッドさらに、作業用スクリプトは 実用的 Javaスクリプトコードの例.
