JavaScript クッキー
CookieはWebページにユーザー情報を保存するために使用されます。
クッキーとは何ですか?
Cookie は、コンピューター上のテキスト ファイルに保存されるデータです。
Web サーバーが Web ページをブラウザーに送信するとき、接続が閉じられた後、サーバーはユーザーの情報を記録しません。
Cookie は、「クライアントのユーザー情報を記録する方法」を解決するために使用されます。
ユーザーが Web ページにアクセスすると、その名前が Cookie に記録されることがあります。
次回ユーザーがこのページにアクセスすると、ユーザーのアクセス記録が Cookie から読み取られるようになります。
Cookie は、次のような名前と値のペアの形式で保存されます:
ブラウザがサーバーから Web ページをリクエストすると、そのページに属する Cookie がリクエスト。 。このようにしてサーバーはユーザー情報を取得します。
JavaScript を使用して Cookie を作成する
JavaScript は document.cookie 属性を使用して Cookie を作成、読み取り、削除できます。
JavaScript で、次のように Cookie を作成します:
Cookie に有効期限 (UTC または GMT 時間) を追加することもできます。デフォルトでは、ブラウザを閉じると Cookie が削除されます:
次のコマンドを使用してブラウザに通知できます。 path パラメータ サーバー Cookie へのパス。デフォルトでは、Cookie は現在のページに属します。
JavaScript を使用して Cookie を読み取ります
JavaScript では、以下を使用できますCookie を読み取るコード:
 | document.cookie は、すべての Cookie を文字列として返します。形式: cookie1=value; cookie3=value を入力します。 ; |
|---|
JavaScript を使用して Cookie を変更します
JavaScript では、次のように、Cookie の変更は Cookie の作成と似ています:
古いCookieは上書きされます。
JavaScriptを使用してCookieを削除します
Cookieを削除するのは非常に簡単です。以下に示すように、expires パラメータを前回の時刻に設定する必要があるだけで、「Thu, 01 Jan 1970 00:00:00 GMT:
削除するときに Cookie の値を指定する必要がないことに注意してください。
Cookie 文字列
document.cookie プロパティは通常のテキスト文字列のように見えますが、
document.cookie に完全な Cookie 文字列を記述した場合でも、Cookie 情報を再読み込みすると、Cookie 情報は名前と値のペアの形式で表示されます。 、古い Cookie は上書きされません。 新しい Cookie が document.cookie に追加されるため、document.cookie を再度読み取ると、次のようなデータが得られます:
cookie1=value; cookie2=value;
特定の Cookie 値を見つける必要がある場合は、 Cookie 文字列内の Cookie 値を見つけるには JavaScript 関数を作成する必要があります。
JavaScript Cookie の例次の例では、訪問者名を保存するための Cookie を作成します。
まず、訪問者はウェブページにアクセスし、名前を記入するよう求められます。この名前は Cookie に保存されます。
次回訪問者がページにアクセスすると、ウェルカム メッセージが表示されます。
この例では、3 つの JavaScript 関数を作成します:
- Cookie 値を設定する関数
- Cookie 値を取得する関数
- Cookie 値を検出する関数
まず、訪問者の名前を保存する関数を作成します:
関数 setCookie(cname,cvalue,exdays)d.setTime(d.getTime()+(exdays*24*60*60*1000));
var 期限切れ = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + 有効期限切れ;
}
関数分析:
上記の関数パラメーターでは、Cookie の名前は cname、Cookie の値は cvalue、Cookie の有効期限が設定されています。
この関数は、Cookie 名、Cookie 値、Cookie の有効期限を設定します。
Cookieの値を取得する関数
次に、指定されたCookieの値を返す関数userを作成します:
{
var name = cname + "=";
var ca = document.cookie .split(';');
for(var i=0; i
var c = ca[i].trim();
if (c.indexOf(name) )== 0) return c.substring(name.length,c.length);
}
return "";
}
関数分析:
Cookie 名のパラメータは cname です。
指定された Cookie を取得するためのテキスト変数を作成します: cname + "=。
セミコロンを使用して document.cookie 文字列を分割し、分割された文字列配列を ca に割り当てます (ca = document.cookie.split(';'))。
ca 配列 (i=0;i Cookieが見つかった場合(c.indexOf(name) == 0)、Cookieの値(c.substring(name.length,c.length)を返します。 Cookieが見つからない場合は、「」を返します。 最後に、Cookieが作成されたかどうかを検出する関数を作成できます。 Cookieが設定されている場合は、挨拶メッセージが表示されます。 Cookieが設定されていない場合は、をクリックすると、訪問者に名前を尋ねるポップアップ ウィンドウが表示され、setCookie 関数を呼び出して訪問者の名前を 365 日間保存します: オンラインインスタンスを表示するには、「インスタンスを実行」ボタンをクリックしてください 次の例では、次の場合に checkCookie() を実行します。ページがロードされる機能。 Cookie値の検出関数
{
var
username=getCookie("username");
if (username!="")
{
alert("またようこそ " + ユーザー名);
}
else
{
ユーザー名 = プロンプト("名前を入力してください:","");
if (ユーザー名!=""
&& ユーザー名!=null)
{
setCookie("ユーザー名",ユーザー名,365);
}
}
}フルインスタンス
インスタンス
<!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>
インスタンスを実行する»
