クッキーの操作-1
JavaScriptを利用すると、ホームページを訪れた人の個別情報をクッキー（Cookie）というファイルに保存できます。このステップでは、JavaScriptでクッキーを利用する方法を学習します。
18.1 クッキー（Cookie）とは…？
クッキー（Cookie）とは、ホームページを訪れた人の個別情報を各自のパソコンに保存できる仕組みのことです。たとえば、ホームページを訪れた回数をクッキーに保存しておけば、次回にホームページを訪れた際に、その数値に1を加えるだけで正確な訪問回数を表示できます。そのほか、訪問者の名前を保存するなど、クッキーはさまざまな場面で活用できます。
クッキーに保存した保存した情報は、Webブラウザごとにテキストファイルとして管理されます。Windows7のInternet Explorer場合、デフォルトの保存場所はC:\Users\ユーザー名\AppData\Local\Microsoft\Windows\Temporary Internet Filesになります。それ以外はこちらを参照してください。
18.2 クッキーの利用方法
JavaScriptでは、クッキーをdocumentオブジェクトのプロパティとして扱います。このため、document.cookieでクッキーの値を読み込んだり、クッキーに値を書き出したりすることが可能です。
・クッキーから値を読み込む場合
変数名 = document.cookie;
・クッキーに値を書きだす場合
document.cookie = 値;
または
document.cookie = 変数名;
ただし、この方法でクッキーに値を書きした場合、Webブラウザを終了すると同時にクッキーの値も削除されてしまいます。このため、クッキーに保存した値を利用できる期間は『Webブラウザを終了するまで』に限定されてしまいます。
18.3 クッキーの有効期限を指定する
Webブラウザを終了した後もクッキーの値を保存しておくには、有効期限を付けた形式でクッキーに値を書き出さなければいけません。
クッキーの有効期限はexpires=（有効期限）と記述し、（有効期限）をグリニッジ標準時で指定します。そして、クッキーに保存する値の後に「;」（セミコロン）で区切って有効期限を書き出します。以上をまとめると、クッキーに書き出す内容は以下のような形式になります。
・クッキーに書き出す内容
値;expires=（有効期限）
（有効期限）に指定するグリニッジ標準時は、Dateオブジェクトに対してtoGMTString()メソッドを実行すると取り出せます。なお（有効期限）を過ぎたクッキーは、Webブラウザにより自動的に削除されます。
以下は、“現在から1年後”を有効期限としてクッキーに変数「namae」の値を書き出すJavaScriptです。
▼Sample18_1.html
このJavaScriptの処理手順は、以下のとおりです。
①新しいDateオブジェクトを作成し、それを「now」に代入します。
②getFullYear()メソッドで「now」から“年”を取出し、それを変数「yy」に代入します。
③変数「yy」に1を足し、“年”を1年後に変更します。
④setFullYear()メソッドで「now」からグリニッジ標準時を取り出し、それを「extime」に代入します。この結果、「extime」には“現在から1年後”のグリニッジ標準時が記録されます。
⑤document.cookieを利用し、クッキーに変数「namae」の値と有効期限を書き出します。
18.4 クッキーの活用例
続いては、クッキーを利用したJavaScriptの具体的な例を紹介しておきます。以下は、プロンプトに入力した名前をホームページに表示するJavaScriptです。入力された名前はクッキーに保存されるため、2回目以降に訪問した際は、名前を入力しなくてもホームページに名前が表示されます。
「こちらをクリックしてください」
▼Sample18_2.html
このJavaScriptの作成ポイントは、以下のとおりです。
・15行目
クッキーに保存されている値を変数「namae」に代入します。なお、クッキーに何も保存されていなかった場合（初回訪問の場合）は、変数「namae」に" "（値なし）が代入されます。
・16～18行目
変数「name」が" "であった場合（初回訪問の場合）、関数「setName()」を実行します。
・19行目
document.write()で変数「namae」をホームページに表示します。
・20～31行目
初回訪問の場合に限り実行される関数「setName()」の記述です。この関数では、プロンプトに名前を入力してもらい、それをクッキーに保存する処理を行います。
・21～24行目
プロンプトを表示し、入力された内容を変数「namae」に代入します（21行目）。もし、「namae」に何も入力されなかった場合は、関数「setName()」を呼び出し、関数「setName()」の処理を初めから再実行します（22～24行目）。
25～30行目
“現在から1年後”を有効期限としてクッキーに変数「namae」の値を書き出します。この処理手順は「Sample18_1.html」と同じです。
ワンポイント
「値;expires=（有効期限）」の形式でクッキーに値を書き出した場合、実際にクッキーから読み込まれる値は「;expires=（有効期限）」の部分を除いた値となります。たとえば、「鈴木健一;expires=（有効期限）」をクッキーに書き出した場合、このクッキーから読み込まれる値は「鈴木健一」となります。
演習
（１）クッキーを利用し、以下からリンクしたページのように訪問回数を表示するホームページを作成してみましょう。
「こちらをクリックしてください」
※変数「n」にクッキーの値を読み込みます。
※変数「n」の値が" "であった場合（初回訪問の場合）は、「初めての訪問ありがとうございます。」と表示し、引数1で関数「setKaisu( )」を呼び出します。
※変数「n」の値が" "でなかった場合（2回目以降の場合）は、変数「n」の値を1つ増やし、それを訪問回数として表示します。また、新しい「n」を引数として関数「setKaisu( )」を呼び出します。
※関数「setKaisu( )」では、変数「s」で引数を受け取り、その値を有効期限を付けた形式でクッキーに書き出します。 ※有効期限は“現在から1年後”とします。
※クッキーの削除のプログラミングは初めから記述しておきます。
※ここに直接入力できます。↓↓(テキストボックスのサイズは、右下の角をドラッグすると調節できます。)
→STEP17へ
→STEP19へ