■ クッキー（cookie）を利用する

クッキー（cookie）はJavascriptでも利用できます。
クッキーとは訪問者の情報を一時的に保存する機能です。
※cookieについては「HP作成の予備知識」−「11.掲示板などのクッキー（cookie）って何ですか？」を参照してください。

保存したい文字を入力ボックスに入力し、「クッキーの保存」ボタンをクリックしますと入力した情報がクッキーに保存されます。。
一度画面を閉じて再度このページを開くか、ブラウザの「更新」ボタンを押すと入力した文字が記憶されてることがわかります。

クッキーの保存期間は24時間に設定していますから、24時間以内なら何回でも表示されます。
24時間経つと自動的に消去されます。
このサンプルを理解するためには、「DHTMLサンプル」や「Javascriptサンプル」などをひと通り読んで参考にして下さい。

◆ 実行サンプル

【　解　説／クッキー保存　】

ボタンを押された時その処理を実行するにはDHTMLの「onclick=""」を使用します。

クッキーを保存する処理はJavascriptの「sav_cook()」というサブルーチン名（処理名）で作成されてるとすれば、配置したボタンには「onclick="sav_cook();"」という記述を追記します。

入力ボックスの値は「document.frm1['txt1'].value」で取得できますので、これを「txt」という変数にセットするには、次のように記述します。

txt = document.frm1['txt1'].value;

Javascriptでクッキーに保存する場合は次のような記述でできますが、そのまま保存しますと他のクッキーがあった場合、正しく取得できなくなってしまいます。

document.cookie = '（保存したいクッキー情報）;expires=（有効期限）';

そこで、保存したいクッキー情報を独立させるために、その情報の頭に「（特定の名前）=」と記述し、最後に「;（セミコロン）」を付けて保存するようにします。

今回は「cookie1」、「cookie2」という2つの名前を使用し、独立したクッキーを2つコントロールできるようにしてみます。
それぞれの名前はJavascriptのサブルーチンを呼び出す時に与えれば1つのサブルーチンで済ませることができます。

そこで、クッキーを入力するための入力ボックス、ボタンを配置したフォームを次のように用意します。

<form name="frm1" class="exp01">
入力文字列：
<input name="txt1" type="text" size="20"><br>
<input type="button" value="クッキー1の保存" onclick="sav_cook('cookie1')"><br>
<input type="button" value="クッキー2の保存" onclick="sav_cook('cookie2')"><br>
</form>

上記の入力ボックスに入力された情報は次のように記述すれば変数「txt0」にセットすることができます。

txt0 = document.frm1['txt1'].value;

ただ、このパラメータ情報の中に「=」や「;」などがあると正しく処理できないため「escape()」関数を使用して次のようにデコード（文字を別の文字体系に変換すること）しておくことが必要で、クッキーに保存する内容は次のようになります。

coknam+"="+escape(txt)

※「+」記号は文字列の結合にも使われます。

有効期限は、最終日時をセットするのですが、これもGMT（グリニッジ標準時）で指定します。
まず、日時を扱うオブジェクト「day0」を新規作成するため次のように記述します。

day0 = new Date();

この「day0」を使用して現在の日時を取得するには「day0.getTime()」を使用します。
この日時はミリ秒で記録されてますので、有効期限を24時間後にするためには、24時間を秒単位にし、次のように1000倍します。

day0.getTime()+60*60*24*1000;

さらに、求められた日時（ミリ秒）を「setTime()」関数を使い、一度「day0」に戻します。

day0.setTime(day0.getTime()+60*60*24*1000);

こうして、求まった有効期限を次のように「toGMTString()」関数を使いGMT（グリニッジ標準時）に変換し、「endday」にセットしておきます。

endday = day0.toGMTString();

呼び出しのときに使用された文字列はサブルーチン側で「coknam」というパラメータで受けるようにします。
したがって、これらの結果を使用してクッキーを保存する記述は次の通りとなります。

document.cookie = coknam+"="+escape(coktxt)+";expires="+endday;

【　解　説／クッキー呼び出し　】

保存されたクッキーは保存時と同様、「document.cookie」で取得できます。
ただ、後の処理を考えて、次のように、この文字の最後に「;（セミコロン）」を追加し、変数「coktxt」にセットしておきます。

coktxt = document.cookie+";";

保存したクッキーは複数ありますので、どのクッキーを取得するかをこのサブルーチン呼び出し時に与え、与えられた文字列をサブルーチン側では「coknam」という変数で取得するものとします。

クッキー文字列からこの「coknam」で与えられた文字と一致するクッキーを取得するには、文字列検索の「indexOf()」という関数を使い、次のように記述します。

stano = coktxt.indexOf(coknam);

※「indexOf()」は一定の文字列から指定した文字の位置を見つける関数です。

該当する文字列が見つかった場合は、「stano」にその文字位置（何番目）がセットされ、見つからない場合は、「-1」がセットされます。

また、同様に、見つかった位置から後ろで「;（セミコロン）」の位置を調べるには次のように記述します。

endno = coktxt.indexOf(";",stano);

この場合、最初に見つかった「;（セミコロン）」の位置が「endno」にセットされます。

「coknam」の文字数は「coknam.length」で取得できますので、必要なクッキー情報は「=」を除いた「stano+coknam.length+1」から「endno」の位置までです。
この範囲の文字列を取得するには「substring()」関数を使って次のように記述します。

coktxt.substring(stano+coknam.length+1,endno);

ただし、この文字は保存時に「escape」されてますので、「unescape()」関数を使って元に戻します。
したがって、これらを1行で記述し、取得した文字列を「txt0」にセットするには次のように記述します。

txt0 = unescape(coktxt.substring(stano+coknam.length,endno));

ただ、クッキー内で文字列が見つからなかった場合はエラーが発生しますので、文字列が見つからなかった場合は．．すなわち、「stano」の値と「-1」を比較し、等しかった場合は処理を行わないようにします。
その「if文」は次のように記述できます。

if (stano != -1){ }else{ }

取得した文字列を呼び出し元に返すために「return」関数を使用して次のように記述しておきます。

return txt0;

Javascriptから文字列を表示するには「document.write()」関数を使用します。

document.write("（表示する文字列）");

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「cookie.js」というファイル名で保存します。

str0 = ""; str0 += "cookie1の内容 → "+get_cook('cookie1')+"
\n"; str0 += "cookie2の内容 → "+get_cook('cookie2')+"
\n"; document.write(str0); function get_cook(coknam) { coktxt = document.cookie+";"; stano = coktxt.indexOf(coknam); if (stano != -1){ endno = coktxt.indexOf(";",stano); txt0 = unescape(coktxt.substring(stano+coknam.length+1,endno)); }else{ txt0 = ""; } return txt0; } function sav_cook(coknam) { txt0 = document.frm1['txt1'].value; day0 = new Date(); day0.setTime(day0.getTime()+60*60*24*1000); endday = day0.toGMTString(); document.cookie = coknam+"="+escape(txt0)+";expires="+endday; }

次に、クッキーの情報を情報を表示させたいところにJavascriptの呼び出しを次のように記述します。

<script type="text/javascript" src="cookie.js"></script>

また、このクッキーの入力の為の入力フォームを次のように記述します。

<form name="frm1" class="exp01">
<script type="text/javascript" src="./js/cookie.js"></script>
入力文字列：
<input name="txt1" type="text" size="20"><br>
<input type="button" value="クッキー1の保存" onclick="sav_cook('cookie1')"><br>
<input type="button" value="クッキー2の保存" onclick="sav_cook('cookie2')"><br>
</form>