方法: 1. "document.cookie="name=value;"" ステートメントを使用して Cookie を設定するか、Cookie 値を変更します。 2. "document.cookie" ステートメントを使用して Cookie 値を取得します。 ; 3. 有効期限値「expires」を渡すと、Cookie が削除されます。
このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
Cookie は訪問者のコンピュータに保存される変数です。ユーザーが Web サイトにアクセスすると、Cookie を通じてデータが訪問者のコンピュータに保存されます。その後、ユーザーが同じコンピュータ上のブラウザを通じて再度ページをリクエストすると、この Cookie が送信され、Cookie を使用してユーザーを識別できます。
1. Cookie の設定
Cookie を設定することで、Cookie を使用してデータを保存できます。各 Cookie は名前と値のペアであり、名前と値のペアは等号で接続され、名前と値のペアが document.cookie に割り当てられます。セミコロンとスペースを使用して各名前と値のペアを区切ることにより、複数の名前と値のペアを一度に document.cookie に割り当てることができます。
Cookie を設定する基本的な形式は次のとおりです。
document.cookie = "名称1=值1[; 名称2=值2; …]";
Cookie を設定する例は次のとおりです。
document.cookie = "username=abc"; document.cookie = "age=23"; document.cookie = "username=abc; age=23";
セミコロンは使用できないことに注意してください。 Cookie の名前または値、および等号 = 等号。これらのシンボルを保存したい場合は、escape() 関数を使用してエンコードする必要があります。たとえば、document.cookie="str="エスケープ("username=nch")、このコードは document.cookie="str=username=nch" と同等です。つまり、等号は = としてエンコードされます。 escape() エンコードを使用する場合は、値を取り出した後に unescape() を使用してデコードし、元の Cookie 値を取得する必要があります。
さらに、上記の形式を使用して設定された Cookie の値がユーザーのコンピュータに保存されると、異なる Web サイトのデータは Web サイトのドメイン名の形式で区別され、異なるブラウザは異なる場所に Cookie を保存します。 , そのため、サーバー間で保存された異なる閲覧 Cookie に相互にアクセスすることはできません。さらに、同じドメイン名で保存される Cookie の数には制限があり、ブラウザごとに保存される Cookie の数の制限も異なります。さらに、各 Cookie に保存されるコンテンツのサイズも制限されており、ブラウザごとにサイズ制限も異なります。
2. Cookie 値の変更
Cookie 値を変更したい場合は、たとえば、document.cookie="age=36" のように再割り当てします。 ";この方法で、以前に設定した age=23 の Cookie 値を変更できます。
3. cookie の取得
document.cookie を通じて現在の Web サイトで cookie を取得すると、次の形式で値を取得します。文字列。この値には、現在の Web サイトのすべての Cookie が含まれます。すべての Cookie がセミコロンとスペースで連結されます。
別の Cookie 値を取得するには、split() メソッドを使用して、セミコロンとスペースを含む文字列をセミコロンで区切られた文字列配列に変換し、その文字列配列を走査します。各名前と値のペアは次のようになります。再度、split()メソッドを使用して、この名前と値のペアを等号で区切られた名前と値を含む配列に変換すると、指定したCookie名の値を取得できます。
たとえば、age という名前の cookie の値を取得するコードは次のとおりです:
document.cookie = "username=abc; age=23";
var arr1 = document.cookie.split(';');
for(var i = 0; i < arr1.length; i++){
var arr2 = arr1[i].split('=');
if(arr2[0] == 'age'){
alert(arr2[1]);
}
}4. cookie の有効期間を設定します
デフォルトでは、Cookie は一時的に保存されます。つまり、デフォルトではメモリに保存され、ハードディスクには保存されないため、保存された Cookie はブラウザのプロセスが閉じられた後に自動的に破棄されます。 Cookie をコンピュータに一定期間または永続的に保存したい場合は、Cookie を設定するときに有効な時間を設定する必要があります。設定形式は次のとおりです:
document.cookie = "名称=值;expires="+字符串格式的时间;
例:
var oDate = new Date(); oDate.setDate(oDate.getDate()+10);//访问页面后的10天过期 //设置cookie的有效时间，时间为字符串格式 document.cookie = 'username=abc;expires='+oDate.toGMTString();
5. Cookie
を削除し、Cookie の有効期間を過去の特定の時刻に直接設定します。例:
var oDate = new Date(); oDate.setDate(oDate.getDate()-1);//访问页面的前一天 document.cookie = 'username=abc;expires='+oDate.toGMTString();
[例 1] document を使用して Cookie を操作します。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用cookie记住登录用户名</title>
<script>
window.onload = function(){
var oUsername = document.getElementById('username');
var oLogin = document.getElementById('login');
var oDel = document.getElementById('del');
//判断用户是否曾经登录过
if(getCookie('username')){
oUsername.value = getCookie('username');
}
//定义一个函数来获取指定名称的cookie值：
function getCookie(key){
var arr1 = document.cookie.split(';');
for(var i = 0; i < arr1.length; i++){
var arr2 = arr1[i].split('=');
if(arr2[0] == key){
return unescape(arr2[1]);//对编码后的内容进行解码
}
}
}
//定义一个函数来设置cookie,同时设置cookie的有效时间
function setCookie(key,value,t){
var oDate = new Date();
oDate.setDate(oDate.getDate()+t);
//使用escape()对内容进行编码
document.cookie = key+'='+escape(value)+';expires='+oDate.toGMTString();
}
//定义一个函数移除cookie
function removeCookie(key){
setCookie(key,'',-1);
}
oLogin.onclick = function(){
alert('登录成功');
//将输入的用户名存储在cookie中，且在登录5天后cookie过期
setCookie('username',oUsername.value,5);
}
oDel.onclick = function(){
removeCookie('username');
oUsername.value = '';//移除cookie后清空文本框内容
}
};
</script>
</head>
<body>
<input type="text" id="username"/>
<input type="button" value="登录" id="login"/>
<input type="button" value="删除用户名cookie" id="del"/>
</body>
</html>注: Firefox と IE ではローカルでの Cookie の一時的な操作のみが許可されており、ブラウザを閉じると Cookie を取得できません。一方、Chrome では Cookie をローカルで操作することはできません。例 1 が Web サーバーに公開されてアクセスされると、これらのブラウザは Cookie を操作できます。
次の図は、Chrome ブラウザで Tomcat Web サーバーにアクセスして公開し、ユーザー名を入力してログイン ボタンと削除ボタンをクリックした結果を示しています (Tomcat サーバーはこのマシン上にあるので、アクセスするにはドメイン名として localhost を使用します)。
ユーザー名を入力してログイン ボタンをクリックします。ユーザー名 Cookie の削除ボタンをクリックする前に Chrome ブラウザを閉じてください。プロセス、 Chrome を再度開いて例 1 にアクセスすると、図 3 に示す結果が得られます。つまり、ユーザー名がテキスト ボックスに自動的に表示されます。 [ユーザー名 Cookie の削除] ボタンをクリックし、Chrome ブラウザー プロセスを閉じ、Chrome を再度開いて例 1 にアクセスすると、図 4 に示す結果が得られます。この時点で、Cookie に保存されているユーザー名は削除されているため、使用できません。テキストボックスが表示されます。
[推奨学習: JavaScript 上級チュートリアル]
以上がJavaScriptでCookieの操作を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
