Javascript-cookies
JavaScriptとCookie
クッキーとは？
WebブラウザとサーバーはHTTPプロトコルを使用して通信し、HTTPはステートレスプロトコルです。 ただし、商用Webサイトの場合、異なるページ間でセッション情報を維持する必要があります。 たとえば、多くのページを完了すると、1人のユーザー登録が終了します。 しかし、すべてのWebページでユーザーのセッション情報を維持する方法。
多くの場合、Cookieの使用は、ユーザーの利便性やサイトの統計情報を改善するために必要な設定、購入、手数料、その他の情報を記憶および追跡する最も効率的な方法です。
使い方 ？
サーバーは、Cookieの形式で訪問者のブラウザにデータを送信します。 ブラウザはCookieを受け入れる場合があります。 存在する場合、訪問者のハードドライブにプレーンテキストレコードとして保存されます。 これで、訪問者がサイトの別のページに到達すると、ブラウザは同じCookieをサーバーに送信して取得します。 取得すると、サーバーは以前に保存されたものを認識または記憶します。
クッキーは5つの可変長フィールドのプレーンテキストデータレコードです-
- 有効期限-Cookieの有効期限が切れる日付。 これが空白の場合、訪問者がブラウザを終了すると、Cookieは期限切れになります。
- ドメイン-サイトのドメイン名。
- Path -Cookieを設定するディレクトリまたはWebページへのパス。 任意のディレクトリまたはページからCookieを取得する場合、これは空白になる場合があります。
- Secure -このフィールドに「secure」という単語が含まれている場合、Cookieはセキュアサーバーでのみ取得できます。 このフィールドが空白の場合、そのような制限はありません。
- Name = Value -Cookieはキーと値のペアの形式で設定および取得されます
クッキーはもともとCGIプログラミング用に設計されました。 Cookieに含まれるデータは、WebブラウザーとWebサーバーの間で自動的に送信されるため、サーバー上のCGIスクリプトは、クライアントに保存されているCookie値を読み書きできます。
JavaScriptは、 Document オブジェクトの cookie プロパティを使用してCookieを操作することもできます。 JavaScriptは、現在のWebページに適用されるCookieを読み取り、作成、変更、および削除できます。
クッキーの保存
Cookieを作成する最も簡単な方法は、次のような文字列値をdocument.cookieオブジェクトに割り当てることです。
document.cookie = "key1 = value1;key2 = value2;expires = date";ここで、 expires 属性はオプションです。 この属性に有効な日付または時刻を指定すると、Cookieは指定された日付または時刻に期限切れになり、その後、Cookieの値にアクセスできなくなります。
注意-Cookieの値には、セミコロン、コンマ、または空白を含めることはできません。 このため、Cookieに保存する前にJavaScript * escape（）関数を使用して値をエンコードすることができます。 これを行う場合は、Cookie値を読み取るときに、対応する unescape（）*関数も使用する必要があります。
例
以下を試してください。 入力Cookieに顧客名を設定します。
<html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
if( document.myform.customer.value == "" ) {
alert("Enter some value!");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "name=" + cookievalue;
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
</form>
</body>
</html>出力
これで、マシンには name というCookieがあります。 複数のkey = valueのペアをコンマで区切って使用して、複数のCookieを設定できます。
クッキーを読む
document.cookieオブジェクトの値はcookieであるため、cookieの読み取りは書き込みと同じくらい簡単です。 そのため、Cookieにアクセスするときはいつでもこの文字列を使用できます。 document.cookie文字列は、セミコロンで区切られたname = valueのペアのリストを保持します。 name はCookieの名前で、valueはその文字列値です。
次のように、文字列をキーと値に分割するために、文字列の* split（）*関数を使用できます-
例
すべてのCookieを取得するには、次の例を試してください。
<html>
<head>
<script type = "text/javascript">
<!--
function ReadCookie() {
var allcookies = document.cookie;
document.write ("All Cookies : " + allcookies );
//Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
//Now take key value pair out of this array
for(var i=0; i<cookiearray.length; i++) {
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
document.write ("Key is : " + name + " and Value is : " + value);
}
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
<p> click the following button and see the result:</p>
<input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
</form>
</body>
</html>注-ここで*長さ*は、配列の長さを返す Array クラスのメソッドです。 配列については別の章で説明します。 その時までに、それを消化してみてください。
注意-マシンにはすでに他のCookieが設定されている場合があります。 上記のコードは、マシンに設定されているすべてのCookieを表示します。
Cookieの有効期限の設定
有効期限を設定し、Cookie内に有効期限を保存することにより、現在のブラウザセッションを超えてCookieの寿命を延ばすことができます。 これを行うには、*「expires」*属性に日付と時刻を設定します。
例
次の例を試してください。 Cookieの有効期限を1か月延長する方法を示しています。
<html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
var now = new Date();
now.setMonth( now.getMonth() + 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>出力
クッキーを削除する
Cookieを削除して、その後にCookieを読み取ろうとしても何も返されないようにする場合があります。 これを行うには、有効期限を過去の時間に設定するだけです。
例
次の例を試してください。 有効期限を現在の日付から1か月遅らせてCookieを削除する方法を示しています。
<html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
var now = new Date();
now.setMonth( now.getMonth() - 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>