cookie を利用して 別ページへ移動前に見ていたタブに戻す方法

質問

http://oshiete1.goo.ne.jp/qa5275862.html
の質問に関連して、こちらももしどなた様かお教え頂けますなら、コメントを頂けますと大変嬉しいです。

宜しくお願い申し上げます。

↑ 引用の【別ページへのURL移動なく、タブを切り替えて各対応する div 内の表示を切り替えるUI】につき、

該当部分を簡単に引用すると、以下のような原始的な javascript で書いています。

--------------------------------------------

window.onload = function(){
createTab();
showCategory('menu1');
setTabClick('menu1Nav','menu1');
setTabClick('menu2Nav','menu2');
setTabClick('menu3Nav','menu3');
setTabClick('menu4Nav','menu4');
setTabClick('menu5Nav','menu5');
preloadImages( ～ ）;
};

function hide(elementId) {
document.getElementById(elementId).style.display = "none";
}

function show(elementId) {
document.getElementById(elementId).style.display = "block";
}

function showCategory(categoryName){
hide('menu1');
hide('menu2');
hide('menu3');
hide('menu4');
hide('menu5');
show(categoryName);
changeTab(categoryName);
}

function createTab() {
var tab_wrap = document.getElementById("tab_wrap");
var tab_conts = document.getElementById("tab_conts");
var nav = document.createElement("ul");
nav.setAttribute('id','nav');
nav.appendChild(createListItem('menu1Nav','#menu1','メニュー1'));
nav.appendChild(createListItem('menu2Nav','#menu2','メニュー2'));
nav.appendChild(createListItem('menu3Nav','#menu3','メニュー3'));
nav.appendChild(createListItem('menu4Nav','#menu4','メニュー4'));
nav.appendChild(createListItem('menu5Nav','#menu5','メニュー5'));
tab_wrap.insertBefore(nav,tab_conts);
}

function createListItem(id,href,text) {
var li = document.createElement("li");
var a = document.createElement("a");
var t = document.createTextNode(text);
li.setAttribute('id',id);
a.setAttribute('href',href);
a.appendChild(t);
li.appendChild(a);
return li;
}

function setTabClick(listName,categoryName) {
var e = document.getElementById(listName).getElementsByTagName('a')[0];
e.onclick = function(){
showCategory(categoryName);
return false;
};
e.onfocus=function(){this.blur();}
}

function changeTab(categoryName){
var e = document.getElementById('nav');
e.className = categoryName;
}

---------------------------------------------------------------

この最初の window.onload = function(){ ～ で
showCategory('menu1'); と、最初に表示されるタブ（＆ 該当 div）を固定で指定しているので、

特定タブに切り替えて、該当する内部の div 内のリンクなどから別ページに移動した後に【最初のタブのあるページ】に戻っても（history.back(); リンクからでもOK）、毎回「最初の menu1 のタブ ＆ 該当 div」が表示されることになります。

この最初の window.onload を、この js 内に セット・ゲットcookie などを使って、現在の Yahoo JAPAN! のTOP上部タブのように、

【★ 別ページに移動した後に前ページへ戻ったら、最後に自分が見ていたタブが開いている状態で戻れる】
ようにできるとすれば、どのような記述をすれば良いでしょうか？

サーバーサイドスクリプトではなく、cookie 利用で js でできれば良いのですが。

javascript 不勉強者には cookie コントロールは難しいかもしれませんが、例示でなく【具体的な記述方法】でご教授頂けますと大変幸いです。

ぐぐって調べましたが、適当なサンプルがどうしても見つからず、
ご理解の深い皆様の教えを頂けますと大変ありがたく。

何卒宜しくお願い申し上げます。

回答No.2

yuu_x · ベストアンサー

====== cookie.js =================================================

var COOKIE = {
　data : {},
　expires : null,
　path : null,
　domain : null,

　init : function( ) {
　　this.parse( );
　　window./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'unload', this.regist, false );
　},

　regist : function( ) {
　　var cookie = [];

　　for( name in COOKIE.data ) {
　　　COOKIE.data.hasOwnProperty( name ) && cookie.push( encodeURIComponent( name ) + '=' + encodeURIComponent( COOKIE.data[ name ] ) );
　　}

　　COOKIE.expires && cookie.push( 'expires=' + COOKIE.expires.toUTCString( ) );
　　COOKIE.path && cookie.push( 'path=' + encodeURIComponent( COOKIE.path ) );
　　COOKIE.domain && cookie.push( 'domain=' + encodeURIComponent( COOKIE.domain ) );

　　document.cookie = cookie.join( '; ' );
　},

　set : function( name, value ) {
　　this.data[ name ] = value;
　},

　get : function( name ) {
　　return this.data.hasOwnProperty( name ) ? this.data[ name ] : null;
　},

　parse : function( ) {
　　var cookie = document.cookie.split( /;\s*/ );
　　var parts, i;

　　for( i=0; i<cookie.length; i++ ) {
　　　parts = cookie[ i ].split( '=' );

　　　switch( parts[ 0 ] ) {
　　　　case 'expires' : this.expires = parts[ 1 ]; break;
　　　　case 'path' : this.path = parts[ 1 ]; break;
　　　　case 'domain' : this.domain = parts[ 1 ]; break;
　　　　default : this.data[ parts[ 0 ] ] = parts[ 1 ];
　　　}
　　}
　}
};

COOKIE.init( );

お礼

yuu_x 様、スクリプトを本当にありがとうございます。
心より感謝申し上げます。

少し別作業等落ち着いたら、ぜひ試させて頂きます。
メソッドのコールで分からない点がありましたら、
また書き込みをさせて頂きます。

そのような際は、もしそのときお時間可能でしたら、宜しくお願い申し上げます。

本当に、2度の書き込みに渡り、ありがとうございました。

回答No.3

yuu_x

すみません、使い方かいてませんでしたね。

関数名、プロパティ名そのままですが、
// 前準備として、有効期限をセットしてやります。Date 型をそのままセットできます。

var date = new Date;
date.setDate( date.getDate() + 1 ); // 有効期限 1 日なら
COOKIE.expires = date;

// そのとき限りで消えてしまってもかまわないようでしたら、セットしなくても大丈夫です。
# この実装いまいちかも。。。

// 保存したいときは、
COOKIE.set( 'shownID', 'menu1' ); など。

// 取り出したいときは
COOKIE.get( 'shownID' );
存在しないときは null が返ります。

データをまとめて消したいときは
COOKIE.data = {};
としてください。
# destroy 関数があってもよかったかもしれません。

// path, domain は必要に応じてセットしてください。わからなければ放置で大丈夫です。

お礼

yuu_x 様、お忙しいところ温かいお心遣い、本当にありがとうございます。

ぜひ試させて頂きます。

重ねて、感謝申し上げます。

補足

yuu_x 様、先日は誠にありがとうございました。

まだバタバタして記述を試せていないのですが、goo より【2週間経過の close催促】がありましたので、一旦本スレッドを閉じさせて頂きます（「またお尋ねすることがあるかもしれない」とも思っておりましたが）。

必要あれば、また別スレッドを立てさせて頂きます。

今回は、本当に誠にありがとうございました。

回答No.1

fujillin

unloadイベントでそのときのタブの番号をクッキーに保存。
onload時にクッキーのタブ番号を表示（なければデフォルト）。
で、よいのでは？

単純にクッキーへの保存、読出しができればよいだけでしょうから、調べれば解説サイトがいろいろとあると思いますが？
（文字数の都合を考えれば、ここでの回答よりも詳細な説明やサンプルも沢山あるはず）
　http://www.google.com/search?q=javascript+cookie

補足

fujillin 様、コメントありがとうございます。
ご指摘のイベント時に記述を書くこと＆ご意見全くごもっともです。本来検索して時間をかけ調べるべきところ、現在別の作業の納期等に追われ半死に状況です。

大変ムシの良い書き込みであることは重々承知しております。

もしお教え頂ける方がいらっしゃれば、

・目的達成に近いサンプルの解説ページURL or
・説明文抜きで勿論結構ですので、「関数定義」と「そのコール方法」の記述法

を教えて頂ければ、当方まさに「天の助け」の状況です。
御恩は忘れません。

「ふざけんじゃねえ」とご気分を害する場合は、どうかお許し＆お流しください。

コメントありがとうございました。