赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名
cookie（クッキー）は、フォームの内容など利用者が何度も同じものを入力しなくて良いように、小さなデータを記録して置けるように考えられました。ネットスケープ社が最初にNetscape Navigatorというブラウザに搭載し、いまではほとんどのブラウザで利用できます。
フォームの名前やパスワードの入力を自動的に記録して、再表示してくれるのによく使われています。また、ページを移動してもデータを引き継げたり、カウンターや利用者の識別コードを自動的に作ることもできます。
JavaScriptを使えば、いつでも何度でも保存と読込ができますので、手軽に扱えます。
| 保存ファイル | ブラウザ毎にテキストファイルで保存 |
|---|---|
| cookieの全容量 | 300個（個数を超えると古いcookieから削除） |
| １つのサイトでの制限数 | 20個（個数を超えると保存できない。ブラウザによって上限が異なる） |
| １つのcookieの容量 | 4096バイト（超えた部分は削除） |
| 有効期限 | 保存時に有効期限を設定（未設定の場合、ブラウザ終了時に削除） |
| ブラウザ間 | ブラウザ毎に保存されるため共有不可 |
| 有効範囲 | ドメイン内や任意のディレクトリ内で共有を設定（ドメインの外からは利用不可） |
document.cookie = "任意の文字列";
「任意の文字列」と表記した部分がcookieとして保存されるデータです。cookieプロパティに対して文字列を代入するだけで、単純に保存が行われます。
ただ、このままではブラウザを閉じると消えてしまいますし、複数のcookieを併用することもできません。そのためには次のように要素を付けて保存する必要があります。
document.cookie = "cname=任意の文字列; expires=(cdata1); path=./samples";
「cname」は任意に付けられるcookieの名前です。ブラウザはディレクトリ毎に名前の数だけcookieを作ることが出来ます。
実際の保存データはcookie名の後に「=」を置いてから書きます。
「;」を付けた後、必要な要素を付けます。
「expires」はcookieの使用期限でこの期限を過ぎると削除されます。
| 要素 | 記述 | 内容 |
|---|---|---|
| 名前 | 任意 | 複数のcookieを使い分けるための識別名。 未指定でも保存は可能。 |
| 有効期限 | expires | cookieデータを保存する日付をグリニッジ標準時で指定する。 未指定の場合、ブラウザの終了時に消える。 |
| 参照ドメイン | domain | cookieを発行（保存）したサーバ名。 未指定の場合、自動的にサーバ名またはIPアドレスが取得される。 |
| 参照パス | path | １つのドメインの中で読み込み可能なディレクトリを指定できる。 未指定の場合、自動的にディレクトリ名を取得します。 |
| セキュリティ | secure | SSLなど安全性の高い暗号化された通信が確保されている場合のみcookieを送信します。 |
domainやpathは省略してかまいません。（設定した場合、後でドメイン名やパス名が代わったときに読込できなくなります。）
有効期限は非常に重要で、設定をしなかった場合や現時点より前の日時で設定した場合、ブラウザの終了時にcookieは消えてしまいます。（cookieを消したいときに利用可能）
var s = document.cookie;
変数へ代入することで、有効なcookieを読み込むことができます。
(cdata2)
変数sには上記のようにcookieが読み込まれます。その中に「(cdata3)」という部分があります。設定した期限やパスは表示されません。（他のcookieを保存するページを利用していない場合は１つのみ表示されます）
複数のcookieが保存されている場合があるため、保存時に名前を付けることと、読み込み時にはその名前を検索してデータを切り出すことが重要です。
複数のcookieがあることを常に前提として、切り出し処理を行う必要があります。
cookieに日本語を保存すると文字化けが発生します。そこで保存をする前に、データをエンコードし、読込をしたらデコードをして元に戻すという処理が必要になります。
var s = escape("テスト");
document.cookie =s;
（ボタンを押すとcookieが保存され、同じ内容をここに表示します）
上記のボタンを押すと、日本語の文字列をescape()でエンコード処理してからcookieに保存し、変数sの内容を表示します。
var s = document.cookie;
s = unescape(s);
変数sにcookieを読み込んだ後、unescape()でデコード処理をしています。
（ボタンを押すとcookieを読み込み、内容をここに表示します）
上記のボタンを押すと、デーコード後の変数sの内容を表示します。
他のサンプルで保存したデータがある場合、それらも一緒に読み込まれます。
cookieはブラウザによって異なりますが、「MagicCookie」などと名付けられたテキストファイルに保存されています。
ブラウザ毎にその内容は保存・読込を行いますので、複数のブラウザ、複数のパソコンを使っている場合は、それぞれにデータの入力が必要です。
cookieを呼び出した後、保存を行わなければcookieはいずれ期限切れとなって消えてしまいます。
cookieの有効期限は保存のときに設定されるので、呼び出しを何度行っても有効期限は更新されません。
掲示板のように書き込みのための補助機能であれば、書き込みしなければcookieを利用する必要もないため、書き込み時にcookieを保存します。
カウンターのように表示と自動更新が目的の場合は、表示や更新の後、直ぐに保存を行うようにします。
また、cookieには総個数の制限とファイル容量（保存しているテキストファイル全体のサイズ）の制限があり、それを越える場合には古いものから自動的に削除されて行きます。
JavaScriptから強制的にcookieを消したい場合は、期限を設定せずに保存します。これでブラウザ終了時に消えてなくなります。
cookieはCGIを使った掲示板などのサービスで必ず活用されています。何度も訪れる訪問者を識別することができ、そのときの利便性を向上させる用途で使用されています。
ただし、CGIの場合はページを読み込んだときにしかcookieを読み書きすることはできません。JavaScriptを使うことでフォームのボタン操作にも連動させることができますし、手軽にHTMLにcookieの便利な機能を組み込むことができます。
cookieにデータを保存しているからといって個人データが保護されている訳ではありません。
パソコンを他人に貸した場合、アカウントを分けていないと同じcookieが読み出されます。ゲストアカウントを使ったり、家族であれば別アカウントを設定して、ブラウザの個人情報を共有しないことが安全な運用に必要です。
また、パソコンを処分する際にも中に残ったcookieを削除しないと個人情報が沢山残っていて危険です。ブラウザの削除機能を使って安全に対処してください。
各ブラウザにはcookieを管理する機能が備わっていますので、その機能を確認しておきましょう。
検索サイトや広告サイトでは、閲覧者を追跡するためにcookieが利用されています。cookieを使用停止にしたり、削除することで追跡を断つことができます。
IEやNCでは、最初からcookieの受け入れが自動的に行われています。cookieを保存する際に、警告を表示したり、受け入れをさせないという設定も可能です。
また、保存しているcookieを表示し、削除する機能もありますので見覚えのないcookieは消しても良いでしょう。
便利なcookieですが、そこにはあなたの大切なデータがまとまって入っているということを忘れないでください。