赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名
cookieの保存と読込のまとめとして、共有部分をまとめて複数の項目を処理できるサンプルを載せておきます。
データの保存と読込に関する記述はありませんので、それぞれ必要なタイミングでユーザー関数を呼び出します。
データは保存時の順番通りに取り出しています。
//cookie名 c_name = "sample_cookie"; //有効期限 c_day = 365; //日数 //データの区切り c_split = "_,_"; //データに同じ文字列が含まれないこと //cookieの読込 function load_cookie() { var c_data,data; //保存cookieの読込 c_data = loadCookie(c_name); if (c_data != "") { //データがある場合 data = c_data.split(c_split); //データを分割 data1 = data[0]; data2 = data[1]; data3 = data[2]; } else { //データがない場合 data1 = ""; data2 = ""; data3 = ""; } } //cookieの保存 function save_cookie() { var c_data; //保存データの準備 c_data = "data 1" + c_split; c_data += "data 2" + c_split; c_data += "data 3" + c_split; //cookieの保存 saveCookie(c_name,c_data,c_day); } //cookie読込 function loadCookie(c_name) { var s,n,m,c_data; //cookieの読み込み c_data = document.cookie; //cookie名 c_name = c_name + "="; //有効なcookie名を調べる n = c_data.indexOf(c_name,0); if (n > -1) { //cookieのデータ部分を取り出す m = c_data.indexOf(";",n + c_name.length); if (m == -1) m = c_data.length; s = c_data.substring(n + c_name.length,m); //デコード return unescape(s); } else { return ""; } } //cookie保存 function saveCookie(c_name,c_data,c_day) { var n,c_date,c_limit; //有効期限 c_date = new Date(); n = c_date.getTime() + (1000*60*60*24*c_day); c_date.setTime(n); c_limit = c_date.toGMTString(); //cookieの書き出し document.cookie = c_name + "=" + escape(c_data) + "; expires=" + c_limit; } </script>
５つの処理に分かれています。
メインルーチンとしてルートで行う処理、cookieを読む準備と読み込むサブルーチン、cookieを保存する準備と保存するサブルーチンです。
ユーザー関数loadCookieおよびユーザー関数saveCookieは汎用性のある読込と保存のためのサブルーチンです。
サブルーチン内でも使う主要な項目をルートのメインルーチンで設定します。
この位置で変数を設定することには２つのメリットがあります。１つは、今後登場する様々なところで共通して使うための準備を一括してできること。そして、サブルーチンなどで設定する処理も見やすい位置にあるため、いつでも修正が簡単にできることです。
今回は３つのグローバル変数を設定しています。
cookie名、cookieの期限までの日数、データを区切る文字列です。
データの区切りというのは、複数のデータを１つにまとめるときに、間に挟んでおいて、また取り出すときにもそれを目印とします。そのため、データで使うような文字列は避けて、意味のない記号を組み合わせるようにします。
cookieの読込時に「;」を読込の最後とするので、セミコロンは使わないようにします。
cookieから読み込んだデータを変数c_dataに入れた後、split()を使って配列変数dataにデータを分割しています。
分割後のデータはそれぞれ３つの変数（data1、data2、data3）に入れ替えています。
複数あるデータを変数c_dataにまとめてから、保存しています。
今度は変数ではなく直接フォームからデータを読み取り、またフォームへ設定を戻す場合です。
フォームは次のような構成を想定します。
<form name="form1"> <input type="text" name="textField" value="2012/1/1"> <select name="selMenu"> <option value="A" selected>選択A <option value="B">選択B <option value="C">選択C </select> <input type="checkbox" name="checkBox">確認済 <input type="radio" name="radioButton" value="R" checked>赤 <input type="radio" name="radioButton" value="G">緑 <input type="radio" name="radioButton" value="B">青 <input type="button" onClick="save_cookie" value="保存">
</form>
確認済 赤 緑 青
スクリプトはデータの準備部分とデータ読込後に配列変数に分割した後の処理が変わります。
データの保存はフォームのボタンで、データの読込は起動時に実行されます。
動作サンプルはこちらです。
//cookie名 c_name = "sample_cookie"; //有効期限 c_day = 365; //日数 //データの区切り c_split = "_,_"; //データに同じ文字列が含まれないこと //cookie読込 load_cookie(); //cookieの読込 function load_cookie() { var c_data,n,m,data; //cookieの読込 c_data = loadCookie(c_name); if (c_data != "") { //データがある場合 data = c_data.split(c_split); //テキストフィールド document.form1.textField.value = data[0]; //セレクトメニュー document.form1.selMenu[data[1]].selected = true; //チェックボックス document.form1.checkBox.checked = (data[2] == "true"); //ラジオボタン document.form1.radioButton[data[3]].checked = true; } } //cookieの保存 function save_cookie() { var n,c_data; //保存データの準備 //テキストフィールド c_data = document.form1.textField.value + c_split; //セレクトメニュー c_data += document.form1.selMenu.selectedIndex + c_split; //チェックボックス c_data += document.form1.checkBox.checked + c_split; //ラジオボタン for (n=0;n<document.form1.radioButton.length;n++) {
if (document.form1.radioButton[n].checked) {
c_data += n + c_split;
}
}
//cookieの保存 saveCookie(c_name,c_data,c_day); } //cookie読込 function loadCookie(c_name) { var s,n,m,c_data; //cookieの読み込み c_data = document.cookie; //cookie名 c_name = c_name + "="; //有効なcookie名を調べる n = c_data.indexOf(c_name,0); if (n > -1) { //cookieのデータ部分を取り出す m = c_data.indexOf(";",n + c_name.length); if (m == -1) m = c_data.length; s = c_data.substring(n + c_name.length,m); //デコード return unescape(s); } else { return ""; } } //cookie保存 function saveCookie(c_name,c_data,c_day) { var n,c_date,c_limit; //有効期限 c_date = new Date(); n = c_date.getTime() + (1000*60*60*24*c_day); c_date.setTime(n); c_limit = c_date.toGMTString(); //cookieの書き出し document.cookie = c_name + "=" + escape(c_data) + "; expires=" + c_limit; }
今回も５つの処理に分かれています。
メインルーチンでは、最後にcookieを読み込んでいますので、ページを読み込むと同時にフォームの設定が行われます。
cookieがなかった場合は、フォームの各タグでデフォルトの値を用意してあるため、そのまま表示されます。
cookieを読込、分割後、それぞれのフォームにあった形式でデータをあてがいます。
テキストフィールドでは、valueに対してそのまま配列変数からデータを入れ替えます。
セレクトメニューでは、INDEX番号を使ってselectedを適用しています。
チェックボックスでは、オンの場合「true」の文字列で保存しているので、その状態を条件文にしてcheckedに適用します。
ラジオボタンでは、INDEX番号を使ってcheckedを適用しています。
保存前の準備として、フォームのタイプ毎に取り出し方があります。
テキストフィールドは、valueの値を読み取ります。
セレクトメニューは、selectedIndexで選択中のINDEX番号を取得します。
チェックボックスでは、checkedの値（trueまたはfalse）を記録しています。
ラジオボタンは、同じ名前のボタンの数だけcheckedの値を調べ、そのうちtrueの場合だけINDEX番号を取得します。