クッキーの操作-2
STEP18で解説したクッキーの利用方法は、厳密には正しいクッキーの利用方法ではありません。また、値を1つしか保存できないのも弱点となります。このステップでは、クッキーを正しく書きだし、複数の値をクッキーに保存する方法を学習します。
19.1 複数の値をクッキーに保存する
STEP18では、クッキーに基本的な利用方法を学習しました。しかし、この方法では1つの値しかクッキーに保存できません。複数の値をクッキーに保存する場合は、属性名=値という形式でクッキーに値を書き出す必要があります。そして、それぞれの属性を「;」（セミコロン）で区切り、最後に有効期限を書き出します。
属性名1=値1;属性名2=値2;属性名3=値3;……;expires=（有効期限）
また、クッキーへ書き出す際に値をASCll形式へエンコードしておく必要もあります。これを忘れると、Webブラウザによってはクッキーに保存されている値を正しく読み込めない場合があります。ASCll形式へのエンコードはescape( )という命令で実行できます。なお、エンコードされた値を読み込む際は、unescape( )でデコードを行います。
19.2 クッキーへの入出力を汎用化する
19.1で示した形式でクッキーを利用する場合は、クッキーへの入出力を汎用化しておくと便利です。たとえば、以下のような関数を作成しておくと、引数を指定して関数を呼び出すだけでクッキーへの入出力を完了できます。
・setCookie(key,data)
クッキーに値を書き出す関数です。属性名（key）と書き出す値（data）を引数として関数を呼び出すと、属性名=値の書き出しが実行されます。また、“現在から1年後”の有効期限も自動的に追加されます。
・getCookie(key)
クッキーから値を読み込む関数です。属性名（key）を引数として関数を呼び出すと、その属性名の値をクッキーから読み込みます。読み込まれた値はreturnで関数の呼び出し元に返されます。
19.3 クッキーへ値を書き込む関数「setCookie()」
それでは、各関数を実際に見ていきましょう。クッキーへ値を書き出す関数「setCookie()」の記述は以下のようになります。
▼setCookie()
この関数のポイントは、以下のとおりです。
・1行目
引数として渡された属性名と値を変数「key」「data」で受け取ります。
・2行目
変数「key」「data」を属性名=値という形式にし、変数「outdata」に代入します。この時点で、クッキーに書き込む値をescape()でASCll形式にエンコードしておきます。
・3～7行目
“現在から1年後”のグリニッジ標準時を「extime」に記録します。
・8行目
属性名=値;expires=（有効期限）という形式でクッキーに値を書き出します。
この関数を実行した結果、すでに同じ属性名がクッキーに存在していた場合は、その属性の値だけが新しい値に書き換えられます。同じ属性名が存在しなかった場合は、新たに「属性名=値;」がクッキーに追加されます。なお、いずれの場合も「expires=（有効期限）」は新しい日時に更新されます。
19.4 クッキーから値を読み出す関数「getCookie()」
続いては、クッキーから値を読みだす関数「getCookie()」について解説します。「変数名=document.cookie」でクッキーから値を読み込むと、「属性名1=値1;属性名2=値2;…」という具合に最後の「;expires=（有効期限）」だけを除いた文字が変数に代入されます。関数「getCookie()」では、この文字の中から必要な値だけを取り出す必要があります。
▼getCookie()
この関数のポイントは、以下のとおりです。
・1行目
引数として渡された属性名を変数「key」で受け取ります。
・2行目
クッキーに保存されている内容を変数「tmp」に代入します。このとき、最後に「;」の文字を追加しておきます。
・3行目
stringオブジェクトのindexOf()メソッドを利用し、変数「tmp」の中で属性名（key）が何番目に登場するかを調べ、その数値を変数「s」に代入します。なお、指定した属性名が見つからなかった場合は、「s」に-1が代入されます。
・4～5行目
変数「s」の値が-1であった場合、クッキーに属性名が保存されていないことになります。この場合は、" "（値なし）をreturnで返します。
・7行目
ここからは、変数「s」の値が-1以外、すなわち、指定した属性名が見つかった場合の処理となります。変数「s」は属性名（key）の最初の1文字が何番目にあるかを示しています。これに、属性名の文字数（key.lengt）と1（「=」の文字数）を足すと、「s」を値の先頭が何番目にあるかを示す数値に変更できます。
・8行目
stringオブジェクトのindexOf()メソッドを利用し、変数「tmp」のs番目以降で最初に「;」が登場する位置を変数「e」に代入します。
・9行目
stringオブジェクトのsubstring()メソッドで、変数「tmp」のs番目からe-1番目の文字を抜き出し、変数「data0」に代入します。これが、指定した属性名の値となります。
・10～11行目
「data0」をunescape()でデコードし、変数「data」に代入します（10行目）。続いて、変数「data」をreturnで関数の呼び出し元に返します。
19.5 クッキーに訪問回数と名前を保存する
最後に、関数「setCookie()」と「getCookie()」を利用したJavaScriptの例を紹介しておきましょう。以下は、訪問者の名前と訪問回数をクッキーに保存し、それをホームページに表示するJavaScriptです。
「こちらをクリックしてください」
▼Sample19_1.html
このJavaScriptの作成ポイントは以下のとおりです。
・11～32行目
関数「setCookie()」と関数「getCookie()」を記述しています。今回はHTMLファイルを少しでも見やすくするため、これらの関数を～内に記述しました。
・41行目
関数「getCookie()」を利用し、クッキーし保存されている訪問者の名前を変数「namae」に代入します。
・42～44行目
変数「namae」が""（値なし）であった場合は、初回の訪問者であると考えられます。よって、関数「setName()」を実行します。
・49～56行目
関数「setName()」で実行される処理です。ここでは、プロンプトに名前を入力してもらい、それを変数「namae」に代入します。また、関数「setCookie()」を利用して、入力された名前（namae）および訪問回数1をクッキーに保存します。
・45～48行目
関数「getCookie()」を利用し、クッキーから訪問回数を読み込み、それを変数「n」に代入します。「45行目」。続いて、document.write()で名前と訪問回数をホームページに表示します（46行目）。その後、訪問回数「n」を1つ増やし（47行目）、関数「setCookie()」で新しい訪問回数をクッキーに保存します（48行目）。
演習
（１）関数「setCookie()」と「getCookie()」を利用し、血液型と訪問回数をクッキーに保存するホームページを作成してみましょう。
「こちらをクリックしてください」
※この演習は、本教材の最後の演習となります。ヒントなしで自由にHTMLファイルを作成してみてください。
※ここに直接入力できます。↓↓(テキストボックスのサイズは、右下の角をドラッグすると調節できます。)
→STEP18へ