JavaScriptのCookieオブジェクト
Cookieは、ユーザー情報をWebページに保存するために使用されます。
クッキーとは？
Cookieは、コンピュータ上のテキストファイルに保存されている一部のデータです。
WebサーバーがWebページをブラウザーに送信すると、接続が閉じられた後、サーバーはユーザー情報を記録しません。
Cookieの目的は、「クライアントのユーザー情報を記録する方法」を解決することです。
- ユーザーがWebページにアクセスすると、その名前がCookieに記録されます。
- 次にユーザーがページにアクセスしたときに、ユーザーのアクセスレコードをCookieで読み取ることができます。
JavaScriptを使用してCookieを作成する
JavaScriptは
document.cookie
プロパティを使用して、Cookieを作成、読み取り、削除できます。
JavaScriptでは、Cookieの作成は次のようになります。
document.cookie = "username = John Doe";
また、Cookieに有効期限（UTCまたはGMT時間）を追加することもできます。デフォルトでは、ブラウザを閉じるとCookieが削除されます。
document.cookie = "username = John Doe; expires = Thu、2013年12月18日12:00:00 GMT";
pathパラメータを使用して、ブラウザにCookieパスを通知できます。デフォルトでは、Cookieは現在のページに属しています。
document.cookie = "username = John Doe; expires = Thu、2013/12/18 12:00:00 GMT; path = /";
JavaScriptを使用してCookieを読み取る
JavaScriptでは、次のコードを使用してCookieを読み取ることができます。
var x = document.cookie;
JavaScriptを使用してCookieを変更する
JavaScriptでは、Cookieの変更は、次のようにCookieの作成に似ています。
document.cookie = "username = John Smith; expires = Thu、2013年12月18日12:00:00 GMT;パス= /";
古いCookieは上書きされます。
JavaScriptを使用してCookieを削除する
クッキーの削除は非常に簡単です。以下に示すように、expiresパラメーターを前回に設定するだけで、1970年1月1日00:00:00 GMTに設定できます。
document.cookie = "username =; expires = Thu、01 Jan 01970 00:00:00 GMT";
削除するときにCookieの値を指定する必要はありません。
コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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 οnlοad="checkCookie()"></body>
</html>