赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名
cookie（クッキー）は、フォームの内容など利用者が何度も同じものを入力しなくて良いように、小さなデータを記録して置けるように考えられました。ネットスケープ社が最初にNetscape Navigatorというブラウザに搭載し、いまではほとんどのブラウザで利用できます。
フォームの名前やパスワードの入力を自動的に記録して、再表示してくれるのによく使われています。また、ページを移動してもデータを引き継げたり、カウンターや利用者の識別コードを自動的に作ることもできます。
JavaScriptを使えば、いつでも何度でも保存と読込ができますので、手軽に扱えます。
【主な仕様】
・cookieはテキストで保存され、300個まで（古いものから消える）
・１つのサイトで20個のcookieが利用可能
・１つのcookieのサイズは4096バイト
・有効期限を付けることができる（期限なしの場合は、ブラウザ終了時に消える）
・ブラウザ毎に保存されるため共有することはできない
・cookieの有効範囲は同ドメイン内で、パスを指定することで適用範囲を制限できる
【文法仕様】
cookieは文字列として作成し、要素を付け加えて使用します。
例文：cname=username; expires=; path=/samples;
| 要素 | 記述 | 内容 |
|---|---|---|
| 名前 | 任意 | 複数のcookieを使い分けるための識別名。 未指定でも保存は可能。 |
| 有効期限 | expires | cookieデータを保存する日付をグリニッジ標準時で指定する。 未指定の場合、ブラウザの終了時に消える。 |
| 参照ドメイン | domain | cookieを発行（保存）したサーバ名。 未指定の場合、自動的にサーバ名またはIPアドレスが取得される。 |
| 参照パス | path | １つのドメインの中で読み込み可能なディレクトリを指定できる。 未指定の場合、自動的にディレクトリ名を取得します。 |
| セキュリティ | secure | SSLなど安全性の高い暗号化された通信が確保されている場合のみcookieを送信します。 |
【cookieの保存】
document.cookie = "";
cookieプロパティに対して文字列を代入するだけで、保存が行われます。
１つのページで名前を変えて複数のcookieを保存することができます。名前が同じ場合は上書きされます。
domainやpathは省略してかまいません。（設定した場合、後でドメイン名やパス名が代わったときに保存できなくなります。）
有効期限は非常に重要です。設定をしなかったり、現時点より過去の日時で設定した場合、ブラウザの終了時にcookieは消えてしまいます。
日付の設定をJａｖａScriptで計算処理する必要がありますので、後で紹介します。
【cookieの読込】
var s = document.cookie;
変数へ代入することで、有効なcookieを読み込むことができます。
上記のボタンを押すと、このサイトで保存されたcookieのうち、このページで有効なものが全て表示されます。その中に「」があります。設定した期限やパスは表示されません。（他のcookieを保存するページを利用していない場合は１つのみ表示されます）
複数のcookieが保存されている場合があるため、保存時に名前を付けることと、読み込み時にはその名前を検索してデータを切り出すことが重要です。
複数のcookieがあることを常に前提として、切り出し処理を行う手順を後で紹介します。
この「cookieを使ってみる」の章では、読み込み（更新）を何度も行って動作の確認をしていただきますので、各項目毎に新しいウインドウを開くようにしています。
--- 実例 ---
（ボタンを押すとcookieが保存され、保存されているcookieをダイアログで表示します）
（保存の実例であり、ボタンやダイアログは処理の開始と終了を判りやすくするためのものです。）
--- 例文 ---
//保存データの準備
c_data = "test data"; //*1
//cookie名
c_name = "sample_cookie="; //*2
//有効期限
c_date = new Date();
n = c_date.getTime() + 1000*60*60*24*365; //*3
c_date.setTime(n);
kigen = c_date.toGMTString();
//cookieの書き出し
document.cookie = c_name + c_data + "; expires=" + kigen; //*4--- 解説 ---
*1：実際にはフォームや計算によって取得します。
複数のデータを繋げて保存しても構いませんが、読込後に正しく切り分けねばなりません。例えば、「50,75,100」のように「,」でデータを区切り１つにします。*2：保存と読込で共有します。名前の後に「=」も付けておきましょう。
*3：有効期限を1年に設定するため、ミリ秒に換算して現在の時刻に加算しています。
複数のcookieを保存する場合は、*1、*2、*4を複数用意することになります。
--- 実例 ---
（ボタンを押すとcookieが読み込まれ、切り出した結果をダイアログで表示します）
（読込の実例であり、ボタンやダイアログは処理の開始と終了を判りやすくするためのものです。）
--- 例文 ---
//保存cookieの読込
c_data = document.cookie;
//cookie名
c_name = "sample_cookie=";
//cookie名からデータの切り出し
n = c_data.indexOf(c_name,0); //*1
if (n > -1) {
//データがあった場合
m = c_data.indexOf(";", n + c_name.length); //*2
if (m == -1) m = c_data.length; //*3
data = c_data.substring(n + c_name.length, m); //*4
} else {
//データがなかった場合
data = "no data"; //*5
}--- 解説 ---
*1：c_data（取り出したcookie全体が入っている）の内にあるc_name（cookie名）を探します。
変数nには、見つけた場合はその先頭位置を、見つからなかった場合は-1が代入されます。次のif文で条件分岐をしています。*2：１つのcookieの区切りである「;」の位置を探します。
検索の先頭位置を「n + c_name.length」としています。これは、変数nにcookie名の最初の位置があるため、cookie名の長さを足して、データの始まり位置から探すという意味です。*4でデータの切り出しの時にも同じ先頭位置を使っています。*3：「;」が見つからなかったとき、cookieの最後までがデータと見なします。cookieの内容を良く見ると最後のcookieには「;」はなく、区切りにだけ使われているからです。
*4：cookieから目的のデータを切り出しています。
*5：cookieが見つからなかった場合に変数dataの初期値を決めておきます。
変数の設定がないと、後の処理で変数dataを参照するとエラーが発生してしまいます。
--- 実例 ---
（ボタンを押すとcookieを消し、保存されているcookieをダイアログで表示します）
（読込の実例であり、ボタンやダイアログは処理の開始と終了を判りやすくするためのものです。）
--- 例文 ---
//cookie名
c_name = "sample_cookie=";
//無効な日時で保存
document.cookie = c_name + "; expires=Sat, 1 Jan 2000 00:00:00 UTC;"; //*1--- 解説 ---
「cookieの保存」で使ったcookieを削除しています。
*1：過去の日時を指定してcookieを上書き処理します。
--- 実例 ---
--- 例文 ---
Counter : <SCRIPT LANGUAGE="JavaScript"> var c_data,c_name,m,n,count;
//*1: cookieの読み込み c_data= document.cookie; //*2: 有効なcookie名を調べる c_name = "cookie_count="; //*2-1: cookie名 n = c_data.indexOf(c_name,0); //*2-2: n = 有効なcookieの始まる位置 //*3: 有効なcookieがあるか判断 if (n > -1) { m = c_data.indexOf(";",n + c_name.length); //*3-1: m = 有効なcookieの終わりの位置 if (m == -1) m =c_data.length; //3-2: 終わりの位置が不明の場合はcookieの最後を終わりの位置にする //*4: 有効なcookieからデータを取り出す count = c_data.substring(n + c_name.length,m); //*5: countに1を足す count++; } else { //*6: countを1にする（有効なcookieがない場合） count = 1; } //*7: countを表示 document.write(count); //*8: countをcookieへ保存 document.cookie = c_name + count; </SCRIPT>--- 解説 ---
ブラウザでリロード（再読込）してカウンターが増えることを確認してください。カウントが１つづつ増えていくはずです。右上のdocument.cookieの表示は、処理前の表示（表示の後でカウンター処理のスクリプトが動作している）になっているため、カウンターの動作は1回遅れた表示になっています。
*1〜*4までのcookieを読み込む部分はややこしくなっていますが、必ず必要な部分です。*5と*6の処理の中身は色々と変わるにしても、*1〜*6まではほとんどそのままの形でコピーして使えます。
コマンドは理解できなくてもかまいませんが、処理の流れはつかんでおきましょう。*1：cookieを読み込んでいます。このページから参照できる全てのcookieを変数sに一端保管します。
現在のcookieの内容（変数c_data）はこのページの右上に表示しています。複数のcookieがある場合、「cookie名=保存した値; cookie名=保存した値;・・・」という形式のテキストが取り出せます。*2：cookie名とデータをつなぐ「=」を１つのキーワードにして（*2-1）、取得したcookie全体（変数c_dataに入っている）からキーワードの始まる位置（変数n）を調べています。
*2-1：cookieには必ず名前を付けて保存をします。ここで設定したcookie名は*3でcookieを取り出すときに参照しています。また、この例では設定していませんが、有効期限や読み取りを許可するディレクトリの指定などもできるようになっています。
*2-2：cookieの先頭位置を調べて置き、後でそこからcookieの1区切りを示す「;」までを切り取って、１つのデータを取り出すことができます。*3：変数nが0以上の場合、キーワード（保存したときに付けたcookie名）が含まれているということになりますから、目的のcookieが保存されているので、*3-1の処理へ進みます。変数nが0の場合、そのcookie名が先頭にあることを示しています。キーワードが見つからない場合、変数nは-1となり*6の処理へ進みます。
*3-1：cookieが見つかったので、取り出したいcookieの終わりの位置を調べます。各cookieは「;」で仕切られていますので、先頭位置から次に出てくる「;」を探して、その位置を変数mに取り込みます。具体的には、cookie全体（変数s）からキーワードの開始位置（変数n）とキーワードの長さ（変数ｃ_nameの文字数）を足した位置から後ろに最初に出てくる「;」の位置を変数mに取得します。
*3-2：もし「;」が見つからない場合（変数mが-1になる）は、cookieが１つしかないか、目的のcookieが最後にあるため、全体の最後の位置（全体の文字数）を変数mへ取得しています。このif文には｛｝がありませんが、これは1行で完結しているためです。*4：ようやくデータを切り取ります。cookieの開始位置（変数n）とキーワードの長さ（変数ｃｎの文字数）を足して切り取り開始位置が「=」の次に来るようにしています。そこから取り出し範囲（変数m）までの文字を抜き出して変数countに入れています。
*5：ここでカウンタを１つ増やしています。「count++」は「count = count +1」と同じ意味で、変数countに１を足して、変数countを更新しています。
*6：cookieがなかった場合、初めての訪問となりますので、変数countに「1」を入れます。
*7：画面にカウンタ（変数count）を表示します。
*8：カウンタ（変数count）をcookieに保存します。今回は有効期限を設定していませんので、ブラウザを終了させたり、PCを再起動させると消えてしまいます。
--- 応用 ---
cookieに有効期限を設定する場合、*8の１行を以下の５行に置き換えます。
詳しい解説は次項で行います。
例文
--- 実例 ---
--- 例文 ---
<FORM NAME="form_name"> 名前：<INPUT NAME="your_name" TYPE="text"> <INPUT TYPE="button" VALUE="登録" onClick="set_cookie()"> </FORM> <SCRIPT LANGUAGE="JavaScript"> var c_data,c_name,m,n,yourname; //cookieの読み込み c_data = document.cookie; //有効なcookie名を調べる c_name = "cookie_name="; n = c_data.indexOf(c_name,0); if (n > -1) { //cookieのデータ部分を取り出す m = c_data.indexOf(";",n + c_name.length); if (m == -1) m = c_data.length; yourname = c_data.substring(n + c_name.length,m); } else { //名前を取り出す（有効なcookieがない場合） yourname = "no name"; } //名前をフォームに表示する document.form_name.your_name.value = yourname; function set_cookie() { //現在の時間を取得 c_date = new Date(); //時間を秒数に換算し、期限を秒数に換算して加算 n = c_date.getTime() + 1000*60*60*24*365; //加算後の時間を時間にセット c_date.setTime(n); //有効期限をグリニッジ標準時に変換 kigen = c_date.toGMTString(); //フォームの入力内容を取得 yourname = document.form_name.your_name.value; //cookieに保存 document.cookie = c_name + yourname + "; expires=" + kigen; } </SCRIPT>--- 解説 ---
最初、フォームには「no name」と表示されています。そこにあなたの名前を入力し、登録ボタンを押してください。次に、このページをリロードするとcookieに登録した名前が表示されます。
cookieの保存時に有効期限を１年間として登録しているのでブラウザを終了し、再度このページを開いても登録した名前が表示されます。
cookieはブラウザによって異なりますが、「MagicCookie」などと名付けられたテキストファイルに保存されています。
ブラウザ毎にその内容は保存・読込を行いますので、複数のブラウザ、複数のパソコンを使っている場合は、それぞれにデータの入力が必要です。
【cookieが消えるとき】
cookieを呼び出した後、保存を行わなければcookieはいずれ期限切れとなって消えてしまいます。
cookieの有効期限は保存のときに設定されるので、呼び出しを何度行っても有効期限は更新されません。
掲示板のように書き込みのための補助機能であれば、書き込みしなければcookieを利用する必要もないため、書き込み時にcookieを保存します。
カウンターのように表示と自動更新が目的の場合は、表示や更新の後、直ぐに保存を行うようにします。
また、cookieには総個数の制限とファイル容量（保存しているテキストファイル全体のサイズ）の制限があり、それを越える場合には古いものから自動的に削除されて行きます。
JavaScriptから強制的にcookieを消したい場合は、期限を設定せずに保存します。これでブラウザ終了時に消えてなくなります。
【CGIとの関係】
cookieはCGIを使った掲示板などのサービスで必ず活用されています。何度も訪れる訪問者を識別することができ、そのときの利便性を向上させる用途で使用されています。
ただし、CGIの場合はページを読み込んだときにしかcookieを読み書きすることはできません。JavaScriptを使うことでフォームのボタン操作にも連動させることができますし、手軽にHTMLにcookieの便利な機能を組み込むことができます。
【自己管理の要点】
cookieにデータを保存しているからといって個人データが保護されている訳ではありません。
パソコンを他人に貸した場合、アカウントを分けていないと同じcookieが読み出されます。ゲストアカウントを使ったり、家族であれば別アカウントを設定して、ブラウザの個人情報を共有しないことが安全な運用に必要です。
また、パソコンを処分する際にも中に残ったcookieを削除しないと個人情報が沢山残っていて危険です。ブラウザの削除機能を使って安全に対処してください。
各ブラウザにはcookieを管理する機能が備わっていますので、その機能を確認しておきましょう。
検索サイトや広告サイトでは、閲覧者を追跡するためにcookieが利用されています。cookieを使用停止にしたり、削除することで追跡を断つことができます。
IEやNCでは、最初からcookieの受け入れが自動的に行われています。cookieを保存する際に、警告を表示したり、受け入れをさせないという設定も可能です。
また、保存しているcookieを表示し、削除する機能もありますので見覚えのないcookieは消しても良いでしょう。
便利なcookieですが、そこにはあなたの大切なデータがまとまって入っているということを忘れないでください。