クッキーを使用すると、Web ページにユーザ情報を保存できます。
クッキーは、コンピュータ上の小さなテキストファイルに保存されたデータです。
Webサーバは、Webページをブラウザーに送信してしまうと、接続はシャットダウンされ、サーバはユーザに関するすべてを忘れてしまいます。
クッキーは、「ユーザに関する情報をどうのように記憶するか」という問題を解決するために考案されました：
クッキーには、次のような名前と値のペアで保存されます：
username = John Doe
ブラウザがサーバからWebページを要求すると、そのページに属するクッキーがリクエストに追加されます。 このようにして、サーバは必要なデータとしてユーザに関する「記憶」情報を取得します。
JavaScriptは、document.cookie プロパティを使用してクッキーの作成、入力、削除を行うことができます。
JavaScriptを使用すると、次のようにクッキーを作成できます：
document.cookie = "username=John Doe";
有効期限（UTC時間）を追加することもできます。デフォルトでは、ブラウザを閉じたときにクッキーは削除されます：
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
path パラメータを使用すると、クッキーがどのパスに属しているのかをブラウザに知らせることができます。 デフォルトでは、クッキーは現在のページに属します。
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
JavaScriptを使用すると、クッキーは次のように読むことができます：
var x = document.cookie;
document.cookieは、cookie1=value; cookie2=value; cookie3=value; のように、すべてのクッキーを1つの文字列で返します
JavaScriptを使用すると、作成時と同じ方法でクッキーを変更できます：
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
古いクッキーは上書きされます。
クッキーを削除するのは非常に簡単です。
クッキーを削除するときに、クッキーの値を指定する必要はありません。
expiresパラメータに渡す日付を設定します：
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC; path=/;";
正しくクッキーの削除を確実にするには、クッキーのパスを明示する必要があります。
パスを指定しないと、ブラウザによってはクッキーを削除できない場合があります。
document.cookie プロパティは、通常のテキスト文字列のように見えます。しかし、そうではありません。
document.cookieにクッキー文字列全体を書き込んだとしても、それを再び読んだ場合、その名前と値のペアしか見ることができません。
新規のクッキーを設定した場合、古いクッキーは上書きされません。 T新しいクッキーがdocument.cookieに追加されるので、document.cookieをもう一度読むと次のようなものが得られます：
cookie1 = value; cookie2 = value;
指定した1つのクッキーの値を検索したい場合は、文字列内のクッキーの値を検索するJavaScript関数を記述する必要があります。
以下の例では、訪問者の名前を格納するクッキーを作成します。
訪問者がwebページに初めて訪れたときに、名前を記入するように促されます。次に、その名前はクッキーに保存されます。
次回、訪問者が同じページを訪れると、歓迎のメッセージが表示されます。
この例では、次の3つのJavaScript関数を作成します：
まず、訪問者の名前をクッキー変数に格納する関数を作成します：
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
例の説明：
上の関数のパラメータは、クッキーの名前（cname）、クッキーの値（cvalue）、およびクッキーが期限切れになるまでの日数（exdays）です。
この関数は、クッキー名、クッキーの値、有効期限文字列を一緒に追加することでクッキーを設定します。
次に、指定したクッキーの値を返す関数を作成します：
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
関数の説明：
Tクッキー名（cname）をパラメータとして使用します。
検索するテキスト（cname + "="）用の変数（name）を作成します。
特殊文字（'$'など）を含むクッキーを処理するため、クッキー文字列をデコードします。
セミコロンで、document.cookieをcaという配列に分割します（ca = decodedCookie.split(';')）。
ca 配列をループし（i = 0; i < ca.length; i++）、各値 c = ca[i] を読み込みます。
クッキーが見つかった場合（c.indexOf(name) == 0）、クッキーの値（c.substring(name.length, c.length）を返します。
クッキーが見つからない場合は、"" を返します。
最後に、クッキーが設定されているかどうかを調べる関数を作成します。
クッキーが設定されている場合は、挨拶が表示されます。
クッキーが設定されていない場合、プロンプトボックスが表示され、ユーザの名前を尋ね、setCookie関数を呼び出して365日間 usernameクッキーを保存します：
function checkCookie() {
var
username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != ""
&& username != null) {
setCookie("username", username, 365);
}
}
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca
= document.cookie.split(';');
for(var i = 0; i < ca.length; i++)
{
var c = ca[i];
while (c.charAt(0) == '
') {
c = c.substring(1);
}
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, 365);
}
}
}
Try it Yourself »
上の例では、ページがロードされると checkCookie() 関数が実行されます。