JavaScript クッキー

クッキーとは何ですか?

Cookie は、コンピューター上のテキスト ファイルに保存されるデータです。

Web サーバーが Web ページをブラウザーに送信するとき、接続が閉じられた後、サーバーはユーザーの情報を記録しません。

Cookieは「クライアント側でユーザー情報を記録する方法」を解決するために使用されます:

ユーザーがWebページにアクセスすると、その名前がCookieに記録されます。

次回ユーザーがこのページにアクセスすると、Cookie 内のユーザーのアクセス記録を読み取ることができます。

Cookie は、以下に示すように、名前と値のペアとして保存されます:

username=John Doe

ブラウザがサーバーから Web ページをリクエストすると、そのページに属する Cookie がリクエストに追加されます。このようにしてサーバーはユーザー情報を取得します。

ドキュメント Cookie 属性の定義

Cookie 属性は、現在のドキュメントに関連するすべての Cookie を設定またはクエリできます。構文は次のとおりです:

document.cookie [ = name1=value1; expire=GMT_String; path=;]

次に 2 つの Cookie を設定する必要があります。 user_id=2 ;user_name=admin;

JavaScript コードは次のとおりです:
document.cookie = "user_id=2";
document.cookie = "user_name=admin";

Cookie の有効期限を設定します。 、パスとスコープ

次の例では、有効期限を 1 日に設定し、パスは Web サイトのルート ディレクトリで、このドメイン名の下にあるすべての Cookie が共有されます:
//現在の時刻を取得します

var date=new Date ();

date.setTime(date.getTime ()+24*3600*1000);

document.cookie = "user_id=2;path=/;domain=.5idev.com;expire="+date.toGMTString( );



Cookie の設定には特別な設定があります。記号

は、Cookie の名前または値にセミコロン (;)、カンマ (,)、およびスペースを使用する必要がある場合には使用できません。値に保持される場合は、エンコードにscape()関数を使用する必要があります。一部の特殊な記号を16進数で表現できます。

document.cookie = "test="+escape("JavaScript cookie test");

値を取り出した後、unescape() を使用してデコードし、元の Cookie 値を取得します。この方法でも、中国語の文字化けを効果的に回避できます。文字たち。

Cookie 値を取得する

document.cookie を通じて現在のページの Cookie 値を直接取得でき、結果は文字列です。次の例では、現在のページの Cookie (存在する場合) を読み取ります。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
  <p>与本文档相关的 cookies(如果存在的话):</p>
<script type="text/javascript">
  document.write(document.cookie)
</script>
</body>
</html>

Cookie 値を検出する関数

最後に、Cookie が作成されたかどうかを検出する関数を作成できます。

Cookieが設定されている場合、挨拶メッセージが表示されます。

Cookie が設定されていない場合、訪問者の名前を尋ねるポップアップ ウィンドウが表示され、訪問者の名前を 365 日間保存するために setCookie 関数が呼び出されます:

function checkCookie()
{
var username=getCookie("username");
if (username!="")
  {
  alert("Welcome again " + username);
  }
  else 
  {
  username = prompt("Please enter your name:","");
  if (username!="" && username!=null)
    {
    setCookie("username",username,365);
    }
  }
}


Use JavaScript to create cookie

JavaScript は、ドキュメントの .cookie 属性を使用して、Cookie を作成、読み取り、削除できます。

JavaScript で、次のように Cookie を作成します:

document.cookie="username=John Doe";

Cookie に有効期限 (UTC または GMT 時間) を追加することもできます。デフォルトでは、ブラウザを閉じると Cookie が削除されます:

document.cookie="username=John Doe;expires=Thu, 18 Dec 2013 12:00:00 GMT";

次のコマンドを使用してブラウザに通知できます。 path パラメータ サーバー Cookie へのパス。デフォルトでは、Cookie は現在のページに属します。

document.cookie="username=John Doe;expires=Thu, 18 Dec 2013 12:00:00 GMT; path=";

JavaScript を使用して Cookie を読み取ります

JavaScript では次のことができますCookie を読み取るには、次のコードを使用します。

var x = document.cookie;

ヒント: document.cookie は、すべての Cookie を文字列の形式で返します。形式: cookie1=value; =値


JavaScript を使用して Cookie を変更する

JavaScript では、次のように、Cookie の変更は Cookie の作成と似ています:

document.cookie="username=John Smith;expires=Thu, 18 Dec 2013 12:00:00 GMT; path=";

古い Cookie は上書きされます。

JavaScriptを使用してCookieを削除します

Cookieを削除するのは非常に簡単です。以下に示すように、expires パラメータを前回の時刻に設定する必要があるだけで、「Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=;expires=Thu, 01 Jan 1970 00」に設定します。 :00:00 GMT";

Cookie を削除するときに Cookie の値を指定する必要はないことに注意してください。


完全な例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
function checkCookie(){
var user=getCookie("username");
if (user!=""){
alert("Welcome again " + user);
}
else {
user = prompt("Please enter your name:","");
  if (user!="" && user!=null){
    setCookie("username",user,30);
    }
}
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>


学び続ける
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p>与本文档相关的 cookies(如果存在的话):</p> <script type="text/javascript"> document.write(document.cookie) </script> </body> </html>
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜