■クッキーの発行

◆手順1【スクリプトの実行】
-----次の行から(copy)-----
<a href="javascript://" onclick="write_theCookie_Exs()">クッキーを発行する</a>
-----上の行まで(copy)-----

◆手順2【javascript】
-----次の行から(copy)-----
function write_theCookie_Exs() {
　theName="webStudio_cookie_00"; //cookie名
　theCookie_Value="これはweb工房です/abcdefghijk"; //データの値
　theCookie_Day="28,Feb 2099"; //保存期限(日)

　setDay=new Date(theCookie_Day); //新規オブジェクトの宣言
　theCookie_expDay=setDay.toGMTString(); //世界標準時(GMT)に変換
　document.cookie=theName + "=" + escape(theCookie_Value) + ";expires=" + theCookie_expDay;

　alert("指定のデータ名[" + theName + "]の値[" + theCookie_Value + "]をcookieに保存しました。");
}
-----上の行まで(copy)-----

■スクリプトの解説

◆クッキーの書き込み
※document.cookie=
　　theName(クッキー名) + "=" +　　//クッキー名
　　escape(theCookie_Value) + ";" +　　//データ内容
　　"expires=" + theCookie_expDay;　　//有効期限
◆データの文字コード化
※escape()　　escape関数/全角文字等をHTMLエンコードします。半角英文字はそのまま表示されます。
◆有効期限を世界標準時(GMT)に変換
※theCookie_expDay=setDay.toGMTString();
※日本時間で2月28日23時59分59秒を有効期限としたい場合は、世界標準時に対して日本時間が9時間の時差があるので
　　theCookie_Day="28,Feb 2099 15:00:00";　　のように指定します。

■保存されたクッキー

◆保存場所
※windowsXPの場合、クッキーは[C:\Documents and Settings\(コンピュータ名)\Cookies]に保存されます。
※クッキーを発行したら、すぐに上記フォルダを開き、フォルダを｢詳細表示｣に設定し更新日時の最も新しいファイルを開いてみて下さい。
◆クッキーのファイル名
※ファイル名は (コンピュータ名)@(パス名の一番最後のフォルダ名)[1].txt です。
※[]内は、同一フォルダで異なるクッキーを作ったときに[2][3]...と自動付番されるようですが、詳細はもう少し使い込んでみないとよく判りません(^^;;)。
◆保存内容
-----次の行から(copy)-----
webStudio_cookie_00　　//cookie名
%u3053%u308C%u306Fweb%u5DE5%u623F%u3067%u3059/abcdefghijk　　//データ内容
ドメイン名/web_studio/tech_b/　　//ドメイン名・パス名
1088　　//保存期限
2063013888
29768622
967278192
29683398
*
-----上の行まで(copy)-----
◆ドメイン名・パス名
※ドメイン名・パス名とも自動取得
※パス名はクッキーを発行したHTML文書のパス名となります。

◆手順1【スクリプトの実行】/手順2【スクリプト】は省略

■保存されたクッキー

◆保存場所及びクッキーのファイル名
※windowsXPの場合、クッキーは[C:\Documents and Settings\(コンピュータ名)\Cookies]に保存されます。
※【b007-1】で作成されたファイルに書き込まれています。
◆保存内容
-----次の行から(copy)-----
webStudio_cookie_00　　//cookie名
%u3053%u308C%u306Fweb%u5DE5%u623F%u3067%u3059/abcdefghijk　　//データ内容
ドメイン名/web_studio/tech_b/　　//ドメイン名・パス名
1088　　//保存期限
2063013888
29768622
3003151712
29683403
*
webStudio_cookie_99
2%u3064%u76EE%u306E%u30C7%u30FC%u30BF%u3067%u3059/lmnopqr
ドメイン名/D:\www\WEB工房\web_studio\tech_b\
1088
2063013888
29768622
628562528
29683407
*
-----上の行まで(copy)-----

■クッキーに保存されたデータをすべて読み込む

◆手順1【スクリプトの実行】
-----次の行から(copy)-----
<a href="javascript://" onclick="read_theCookie_Exs()">クッキーを読み込む</a>
-----上の行まで(copy)-----

◆手順2【javascript】
-----次の行から(copy)-----
function read_theCookie_Exs() {
theCookie_Value=unescape(document.cookie);
alert("cookieに保存されているクッキーは["+ theCookie_Value + "]です。");
}
-----上の行まで(copy)-----

◆クッキーの読み込み形式
※ここでクッキーをすべて読み込んだときダイアログに表示される形式は
　　cookie名=データ内容;cookie名=データ内容
となっており、｢cookie名=データ内容｣が｢;｣記号で連結されています。 　　webStudio_cookie_00=これはweb工房です/abcdefghijk; webStudio_cookie_99=2つ目のデータです/lmnopqr ※最後に｢;｣はついていないことに注意して下さい。cookie名毎に読み出す場合はクッキーの最後尾に｢;｣を付加して処理を行います。

■指定したデータのみ読み込む

◆手順1【スクリプトの実行】
※引数として｢読み込むcookie名｣を渡します

-----次の行から(copy)-----
<a href="javascript://" onclick="read_theCookie_Exs2('webStudio_cookie_00')">webStudio_cookie_00を読み込む</a>
-----上の行まで(copy)-----

◆手順2【javascript】
-----次の行から(copy)-----
function read_theCookie_Exs2(theName) {
　theCookie_Value="";　　//クッキーの内容を宣言
　theCookie=document.cookie + ";";　　//クッキーの最後尾に ; 記号を付加
　Cookie_start=theCookie.indexOf(theName,0);　　//cookie名(theName)があるかどうか検索

//保存されたクッキーに指定されたcookie名(theName)があった場合の措置
　if (Cookie_start!=-1) { 　　Cookie_end=theCookie.indexOf(";", Cookie_start);
　　　//Cookie_startを開始地点として次の｢;｣(クッキー内容の最後尾)の位置検索
　　theCookie_Value=unescape(theCookie.substring(Cookie_start + theName.length +1, Cookie_end));
　　　//theCookieから指定範囲の切り出しとデコード
　}

　if (theCookie_Value=="") {
　　alert("指定のデータ名[" + theName + "]はcookieに書き込まれていません。");
　} else if (theCookie_Value==";") {
　　alert("指定のデータ名[" + theName + "]はcookieに存在しますがデータはすでに消去されています。");
　} else {
　　alert("指定されたデータ名[" + theName + "]の値は["+ theCookie_Value + "]です。");
　}
}
-----上の行まで(copy)-----

◆クッキーの最後尾に｢;｣を付加
※theCookie=document.cookie + ";";
※クッキーをすべて表示したときの解説を参照して下さい。
◆クッキー内の指定文字を検索
※関数indexOf(theName)
※theCookie.indexOf(theName,0);でクッキーtheCookieの先頭(0文字目)からtheNameが含まれるかどうか調べます。戻り値は検索開始位置から検索された文字の位置です。見つからない場合は-1を返します。,0 は省略可能です。
※Cookie_start=theCookie.indexOf(theName,0);で、Cookie_start＝クッキーtheCookie内における指定されたcookie名のある位置となります。
※Cookie_end=theCookie.indexOf(";", Cookie_start);では、Cookie_startを開始位置として次の｢;｣記号のある位置(すなわちデータ内容の最後尾)を検索します。
◆ASCII形式を文字にデコード
※関数unescape()
※unescape(***)で、エンコードされて保存されているデータ内容をデコードして取り出します。
◆文字列から指定された範囲を切り出す
※関数substring(開始位置,終了位置) ※theCookie.substring(Cookie_start + theName.length +1, Cookie_end)で、クッキーtheCookieから [Cookie_start + theName.length +1 ] 〜 [Cookie_end]の範囲を切り出します。
※[Cookie_start + theName.length +1]とはデータ内容の次の位置、です。
◆判定条件
※theCookie_Value=unescape(theCookie.substring(Cookie_start + theName.length +1, Cookie_end));の戻り値
　　theCookie_Value==""---該当するcookie名がない
　　theCookie_Value==";"---該当するcookie名はあるがデータ内容が消去されている
となります。

■スクリプト

◆手順1【スクリプトの実行】
※引数として｢消去するcookie名｣を渡します

-----次の行から(copy)-----
<a href="javascript://" onclick="del_theCookie_Exs('webStudio_cookie_00')">webStudio_cookie_00を消去する</a>
-----上の行まで(copy)-----

◆手順2【javascript】
※クッキーに保存したデータを消去するには、保存期限を現在より過去にしてcookieを上書きします。

-----次の行から(copy)-----
function del_theCookie_Exs(theName) {
　document.cookie=theName + "=;expires=Thu,01-Jan-70 00:00:01 GMT";
}
-----上の行まで(copy)-----

■保存されたクッキー

◆保存場所及びクッキーのファイル名
※windowsXPの場合、クッキーは[C:\Documents and Settings\(コンピュータ名)\Cookies]に保存されます。
※【b007-1】で作成されたファイルに書き込まれています。
◆保存内容
※cookie名・パス名・保存期限は残っていますが、データ内容は消去されています。
-----次の行から(copy)-----

webStudio_cookie_00
　　　　　　　　　　　　(←データ内容が消去されている)
~~local~~/D:\www\WEB工房\web_studio\tech_b\
1088
667801216
34459479
2626001456
29683414
*
webStudio_cookie_99
　　　　　　　　　　　　(←データ内容が消去されている)
~~local~~/D:\www\WEB工房\web_studio\tech_b\
1088
667801216
34459479
2651831456
29683414
*
-----上の行まで(copy)-----
■保存されたクッキーの削除
※保存されたクッキーを完全に削除するには、クッキーの保存されたファイルを削除するのが一番確実です。
※保存されたファイルをオープンして内容を変更して上書きしたりすることは避けた方が無難です。

◆解説】
※クッキーが有効でない場合やクッキーの書き込みに失敗した場合等に使えるかも
※クッキーを有効にしていない人も多い様なので、「クッキーを有効にしないさい」と強制するのも如何なものかとは思いますね。トラブル回避等に使用してもよいと思います。

◆ドメイン・パス名を指定するわけと注意
※ドメイン・パス指定を省略すると、この部分は自動的にクッキーを発行するhtmlファイルのドメイン・パス名となります。
※従って｢ドメイン・パス指定｣は、別のフォルダを指定するときに実行すればいいわけです。
※ここで発行したクッキーを他のフォルダのhtml文書で読み込みたいとき等に有効です。

※故に、クッキーを発行した文書からはこのクッキーは読み込んだり消去したりはできないようです。指定したドメイン・パス名の文書からのみ読み込み・消去が可能です。
※本例では｢読み込み｣｢消去｣は、一度｢指定パス｣先に保存したファイルをオープンして、そのファイルから実行するようにしています。

◆ドメイン・パス指定方法
※ドメインは自動取得ですが、パスを指定します。
※http://www.bestcare.co.jp/web_studio/tech_b/b007/のとき
　　　ドメイン名　bestcare.co.jp
　　　パス名　/web_studio/tech_b/b007/
となります。上記例ではtheCookie_Path="/web_studio/tech_b/b007/";としています。
◆保存ファイル名
※保存されるファイルは (コンピュータ名)@b007[1].txt というようになります。
※｢解説｣コーナーにあるサンプル(メールを送るフォーム)も同一フォルダ上にあり、このサンプルで発行したクッキーも同じテキストファイルに保存されます。サンプルを用いた後、クッキーの保存ファイルを確認してみて下さい。

◆解説
※getTime()メソッド---
　　現在の時間(1970年1月1日0時0分0秒からの経過時間)をミリ秒単位で取得します。
※theCookie_Day*1000*60*60*24);で、theCookie_Day(日)後の時間をミリ秒単位に変換しています。
※setTimeオブジェクト
　　ミリ秒単位で日付と時間を設定します。GMTへの変換は、このあとで行います。

■【スクリプトの実行】
-----次の行から(copy)-----
<form name="FORM_1">
　cookie名　<select name="txtBox_1_1">
　　<option value="webStudio_cookie_01" selected>　webStudio_cookie_01　</option>
　　<option value="webStudio_cookie_02">　webStudio_cookie_02　</option>
　　<option value="webStudio_cookie_03">　webStudio_cookie_03　</option>
　</select>
　データ内容 <input type="text" name="txtBox_1_2" size="30">;
　保存期限　 <input type="text" name="txtBox_1_3" size="30">;

　<input type="button" value="書き込む" onclick="write_theCookie()">
　<input type="button" value="読み込む" onclick="read_theCookie()">
　<input type="button" value="消去する" onclick="del_theCookie()">
</form>
-----上の行まで(copy)-----

■【javascript】
※クッキーの保存されているテキストファイルはすべて同じです。

◆クッキーに書き込む
-----次の行から(copy)-----
function write_theCookie() {
　theName=FORM_1.txtBox_1_1.value;
　theCookie_Value=FORM_1.txtBox_1_2.value;
　theCookie_Day=FORM_1.txtBox_1_3.value;　　//保存期限(日)

　if ((theCookie_Value=="") || (theCookie_Day=="")) {
　　alert ("cookieに保存するデータ及び保存期限を入力して下さい。");
　　return false;
　}

　if ((theCookie_Day<=0)||(theCookie_Day>=1000)) {
　　alert ("cookieに保存するデータ及び保存期限は[1]〜[999]日の範囲で指定して下さい。");
　　return false;
　}

　setDay=new Date(); 　setDay.setTime(setDay.getTime() + theCookie_Day*1000*60*60*24);
　theCookie_expDay=setDay.toGMTString();
　document.cookie=theName + "=" + escape(theCookie_Value) + ";expires=" + theCookie_expDay;

　if (!navigator.cookieEnabled) {
　　alert("クッキーへの書き込みができません。ブラウザのセキュリティ等の設定を確認して下さい。");
　　return false;
　}

　alert("指定のデータ名[" + theName + "]の値[" + theCookie_Value + "]をcookieに保存しました。");
}
-----上の行まで(copy)-----

◆クッキーから読み込む
-----次の行から(copy)-----
function read_theCookie() {
　theName=FORM_1.txtBox_1_1.value;
　theCookie=document.cookie + ";";
　theCookie_Data="";
　Cookie_start=theCookie.indexOf(theName);

　if (Cookie_start!=-1) {
　　Cookie_end=theCookie.indexOf(";", Cookie_start);
　　theCookie_Data=unescape(theCookie.substring(Cookie_start + theName.length +1, Cookie_end));
　}

　if (theCookie_Data=="") {
　　alert("指定のデータ名[" + theName + "]はcookieに書き込まれていません。");
　} else if (theCookie_Data==";") {
　　alert("指定のデータ名[" + theName + "]はcookieに存在しますがデータは消去されています。");
　} else {
　　FORM_1.txtBox_1_2.value=theCookie_Data;
　　alert("cookieに保存された指定のデータ名[" + theName + "]の値は["+ theCookie_Data + "]です。");
　}
}
-----上の行まで(copy)-----

◆クッキーデータを消去する
-----次の行から(copy)-----
function del_theCookie() {
　theName=FORM_1.txtBox_1_1.value;

　theCookie_Data="";
　theCookie=document.cookie + ";";
　Cookie_start=theCookie.indexOf(theName);

　if (Cookie_start!=-1) {
　　Cookie_end=theCookie.indexOf(";", Cookie_start);
　　theCookie_Data=unescape(theCookie.substring(Cookie_start + theName.length +1, Cookie_end)); 　}

　if (theCookie_Data=="") {
　　alert("指定のデータ名[" + theName + "]はcookieに書き込まれていないので消去できません。");
　} else if (theCookie_Data==";") {
　　alert("指定のデータ名[" + theName + "]はcookieに存在しますがデータはすでに消去されています。");
　} else {
　　Conf="消去指定されたデータ名[" + theName + "]の値は["+ theCookie_Data + "]です。消去していいですか。";
　　　if (confirm(Conf)) {
　　　　document.cookie=theName + "=;expires=Thu,01-Jan-70 00:00:01 GMT";
　　　　alert("消去指定されたデータ名[" + theName + "](["+ theCookie_Data + "])を消去しました。");
　　　}
　}
}
-----上の行まで(copy)-----