クッキーの利用
投稿者：制作部
2008/11/19 00:20
この記事は約4分で読むことができます。
クッキーの生い立ちは置いておくとして、クッキーの利用目的は、利用者の識別や接続状態の管理で、古くは掲示板やチャット等に用いられる事が多かったと記憶しています。
他にも買い物カートのような仕組みにも組み込まれているようです。
クッキーは、利用者のＰＣ端末の中にデータを格納仕組みになっているのですが、利用方法も2通りあります。
1 指定の情報をメモリに保存（次回アクセス時も利用可能）。
2 接続状態だけを仮想メモリに保存（ブラウザを閉じる事で情報は削除されます）。セッション管理といいます。
プログラムの作りについては、続きをどうぞ・・・
利用者の名前とメールアドレスを毎回入力してもらう手間を省きたいというニーズがありましたので、まずは全体像から
1 名前を入力 → 入力完了時に、cookieで保存 → メールアドレスを入力 → 入力完了時に、cookieで保存
2 ページリロード時に、cookieで保存されたデータを当該箇所に呼び出す。
3 次回アクセス時、1へ回帰。もしくは、もう入力しない。
ブラウザ上では、上記の流れで利用します。
今回、条件として入力フォームはHTMLファイルとなっていましたので、Javascriptで記述する事にしました。
用意するファイルは、HTMLとJavascriptの2ファイルだけです。
HTML側（index.html）
<?xml version=”1.0″ encoding=”utf-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ja” lang=”ja”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<meta http-equiv=”content-script-type” content=”text/javascript” />
<script type=”text/javascript” src=”./js/cookie.js”></script>
</head>
<body>
<form action=”***” method=”post”>
お名前 <input type=”text” name=”お名前” value=”" id=”user” onchange=”set_cookie(‘user’)” />
メールアドレス <input type=”text” name=”メールアドレス” value=”" id=”mail” onchange=”set_cookie(‘mail’);” />
</form>
</body>
</html>
※説明の為、簡素化してありますのでWeb標準に準拠しておりません。
javascript側で処理しやすくする為に、各inputにはidを割り振ります
値入力完了時にcookie保存する処理を実行したい為、イベントのonchangeを設定
処理名は、set_cookie()として、id名を渡しておきます。
Javascript側（cookie.js)
window.onload = function reload() {
this.read_cookie();//リロード時の処理内容
}
//——————————————————————-
// クッキーへの書き込み
//——————————————————————-
function set_cookie(str_id){//html側でonchangeされた時にid名が渡される
//– 初期設定
var limit = 30;//保持日数
sday = new Date();//日付データ取得
sday.setTime(sday.getTime() + (limit * 1000 * 60 * 60 * 24));//保持日数を加味して、日付データの再生成
s2day = sday.toGMTString();//グリニッジ標準時刻形式へ変換
//– クッキーデータの格納
document.cookie = str_id + “=” + escape(document.getElementById(str_id).value) + “;expires=” + s2day;
}
//——————————————————————-
// クッキーから読み込み
//——————————————————————-
function read_cookie(){
var scookie = document.cookie// クッキー情報を読み込む
var scdata = scookie.split(“; “);//「; 」で分割
var scdata_num = scdata.length;//配列数を取得
for(i=0; i<scdata_num; i++){//配列数だけループ
scdata_str = scdata[i].split(“=”);//「=」で分割
document.getElementById(scdata_str[0]).value = unescape(scdata_str[1]);//該当箇所へ反映
}
}
となります。
クッキー利用でのポイントは
書き込みでは、「key=値;expires=保存の期限（グリニッジ標準時間）」で書き込まれるという事。
読み込みでは、「key=値; key=値; key=値; key=値; ・・・・」という形式で格納されているという事。
のたったの2点です。
あとは、要素数がふえれば、その数だけループさせる仕組みにすれば、汎用性も高くなります。
保存期間のところをブランクにすると、情報は仮想メモリにとどまるだけとなりますので、ブラウザを閉じた際には消失します。
その特性を活かして、接続状態の確認に利用するケースが多いと思います。
また、上記のプログラムは、完全なものではありません。解説しやすいように一部省略しております。
プログラム自体は、ご自由にご利用いただいてかまいませんが、自己責任にてお願い申し上げます。
【編集担当：紀井】
