まず、基本を見てみましょう:
1. Cookie とは何ですか?
Cookie は、訪問者のコンピューターに保存される変数です。この Cookie は、同じコンピュータがブラウザを通じてページを要求するたびに送信されます。 JavaScript を使用して Cookie 値を作成および取得できます。
2. Cookie の例:
• Cookie に名前を付ける 訪問者が初めてページにアクセスするとき、自分の名前を入力できます。名前は Cookie に保存されます。訪問者がサイトに戻ると、「ようこそ John Doe!」のようなウェルカム メッセージが表示されます。名前は Cookie から取得されます。
•パスワード クッキー 訪問者が初めてページにアクセスするとき、パスワードを入力することがあります。パスワードは Cookie に保存することもできます。再度サイトにアクセスすると、Cookie からパスワードが取得されます。
•日付 Cookie 訪問者が初めてサイトを訪問したとき、現在の日付を Cookie に保存できます。再度サイトにアクセスすると、「前回の訪問は 2005 年 8 月 11 日火曜日でした!」というようなメッセージが表示されます。日付も Cookie から取得されます。
以下で Cookie インスタンスを作成してみましょう。Cookie の作成と削除の方法は次のとおりです。
コードの JavaScript 部分:
//Cookie を作成します
function setCookie(name, value,expiredday) {
var exp = new Date()
exp.setTime; (exp.getTime()expiredday*24*60*60*1000); //Cookieの期間を設定します
document.cookie = name "="escape(value) "; 期限切れ" "=" exp.toGMTString() ;// クッキーを作成します
}
// クッキーの値を抽出します
function getCookie(name) {
var cookieStr = document.cookie
if(cookieStr.length > 0); {
var cookieArr = cookieStr.split(";") //Cookie 情報を配列に変換します
for (var i=0; ivar cookieVal = cookieArr; [i] .split("="); // Cookie の各セット (Cookie 名と値) を配列に変換します
if(cookieVal[0] == name) {
return unescape(cookieVal[1) ]); // 抽出する必要がある Cookie の値を返します
}
}
}
}
// テスト Cookie
function checkCookie() {
var cookieUser = document.getElementById(" cookieUser");
var userName = getCookie("userName");
if(userName) {
cookieUser.innerHTML = "こんにちは、" userName ";
} else {
var value = prompt("ユーザー名を入力してください", "");
if(value) {
setCookie('userName', value, 1); {
alert("ユーザー名を入力してください! ");
}
}
}
主に必要な Cookie 情報を抽出する方法にあります。この例では、getCookie 関数は主に Cookie 情報を配列。抽出する必要がある Cookie 値を見つける方法です。次のように、正規表現を使用して一致させることもできます。
function getCookie(name) {
var cookieStr = document.cookie;
var cookieArr = cookieStr.match(new RegExp(name "=[a-zA -Z0- 9]*;$"));
var cookieVal = cookieArr.split("=");
if(cookieVal[0] == name) {
return unescape(cookieVal[1] ]);
}
}
たとえば、この例では、userName という名前の Cookie がブラウザに保存されていない場合、ユーザーはユーザー名を入力するよう求められます。ページが再び更新されます。入力した Cookie の値を表示します。最後に、コードをテストします。