SELECTの選択状態を、複数のVALUE要素の一部を使ってCookie保存したい

2008/12/03 20:07

このQ&Aのポイント

複数のVALUE要素を使ってSELECTの選択状態をCookieに保存する方法を知りたいです。
保存した後に、SELECTのVALUE値を変更すると保存データとの照合ができなくなるため、一部の値を連番にして照合する方法を考えました。
HTMLのサンプルコードを提供し、選択状態を保存して再現する方法についてのアドバイスをお願いします。

SELECTの選択状態を、複数のVALUE要素の一部を使ってCookie保存したい

1つの選択に複数のvalue値を持つSELECTで、選択状態をCookieに保存しているのですが、保存した後に、諸般の事情でSELECTに設定してあるvalueの値を変更(修正)しなければならないことがあります。しかしそうすると、Cookieを読み込んだとき保存データとSELECTが照合出来なくなり選択状態を再現できません。そこで、valueで持たせている数値のうち1ヶ所を連番にして、そこだけ照合して読み込みできないかと思い立ちました。 v[1] = o.b.value.split(',')[3]; などとして、value値の一つを抜き出して保存するところまでは出来たのですが、それをCookieから読み込んでも、複数のvalueの値の1ヶ所を選んで照合する方法がわかりません。そもそも可能なのかもわからないのですが・・何か良い方法はないでしょうか？。サンプルをHTML化してアップローダに置いたもの http://kissho.xii.jp/1/src/1jyou57011.html <HTML> <BODY> <form id="myform"> <BR> セレクト1　<SELECT name="a"> <OPTION value="0,00,000,a00" selected>0</OPTION> <OPTION value="1,11,111,a01">1</OPTION> <OPTION value="2,22,222,a02">2</OPTION> <OPTION value="3,33,333,a03">3</OPTION> <OPTION value="4,44,444,a04">4</OPTION> <OPTION value="5,55,555,a05">5</OPTION> </SELECT>　← valueをまとめて保存。Cookieから読み込み選択状態の再現も可能。<BR> <BR> セレクト2　<SELECT name="b"> <OPTION value="0,00,000,b00" selected>0</OPTION> <OPTION value="1,11,111,b01">1</OPTION> <OPTION value="2,22,222,b02">2</OPTION> <OPTION value="3,33,333,b03">3</OPTION> <OPTION value="4,44,444,b04">4</OPTION> <OPTION value="5,55,555,b05">5</OPTION> </SELECT>　← 「,」で分離してvalue[3]のみ保存。読み込みで選択状態の再現まではできず。<BR> <BR> 保存番号　<SELECT size="3" name="selectsave"> <OPTION value="v1" selected>保存1</OPTION> <OPTION value="v2" >保存2</OPTION> <OPTION value="v3" >保存3</OPTION> </SELECT><BR> <BR> <INPUT type="button" value="セーブ" name="save" onclick="set_cookie()">　 <INPUT type="button" value="ロード" name="lord" onclick="get_cookie()">　 <input type="reset" value="リセット"> </form> Cookieデータ表示<br><input type="text" size="50" id="sample"> <script language="JavaScript"> function set_cookie(){ o=document.getElementById('myform'); var v =[]; v[0] = o.a.value; v[1] = o.b.value.split(',')[3];　//「,」で分離して[3]のみ保存 saveCookie( o.selectsave.value, v.join('/'),30); document.getElementById('sample').value=v.join('/'); } function get_cookie(){ var o=document.getElementById('myform'); var GET=loadCookie(o.selectsave.value).split('/'); document.getElementById('sample').value=loadCookie(o.selectsave.value);//sapmle setvalue(document.getElementById('myform').a, GET[0]); setvalue(document.getElementById('myform').b, GET[1]); } function setvalue(o,v){ for(i=0;i<o.length;i++) if(o[i].value==v) o[i].selected=true; } function saveCookie( vn, v, dy ){ if(navigator.cookieEnabled) document.cookie = vn+ '='+ v+ ';expires='+ new Date((new Date()).getTime()+dy*24*3600000).toGMTString(); } function loadCookie(vn){ var rt=''; if( vn && document.cookie ) { var v = document.cookie.split(';'); for(i in v){ v[i].match(/^\s*(.*)=(.*)$/); if( RegExp.$1 == vn) { rt = RegExp.$2; break; } } } return rt; } </script> </BODY> </HTML>

kesigomu7
お礼率100% (3/3)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2008/12/04 17:27 回答No.2

#1です。なかみをちゃんと見たわけじゃないけど、loadCookieでは正しく値をとれているのに、最後にセットする時に、aもbも同じにvalueと比較しているから照合できないだけでは？ bの方は分解して一部だけ保存しているので、そのまま照合しても同じ値が存在するはずがない。とりあえず、質問の例で言えば、bの方は setvalue2(document.getElementById('myform').b, GET[1]); とでもしておいて function setvalue2(o,v){ for(i=0;i<o.length;i++) if(o[i].value.split(',')[3]==v) o[i].selected=true; } としてやれば、値のセットはできます。表示している文字(text）のほうを識別子に利用するとか（これも変わるのかなぁ？）、単純な識別子を用いてデータセットを特定する考え方にするのが良いかと思う。（データセットの中身は書き換えるということなので）このような識別子がないとすると、どのデータセットがどのデータセットと同じなのか（内容が変わるので、比較しても違う）そもそもわからないことになってしまう。また、数も変わるということなので、該当するデータセットが存在しないというケースも想定して処理を考えておく必要があると思われます。（ご質問の状態と同じことが起こります＝データが見つからない）

質問者

お礼 2008/12/04 21:12

>　としてやれば、値のセットはできます。すごい！！。やっぱり駄目なのかなぁ、と諦めかけてたんですが、、(＾＾；；教えて頂いたコードの記述で希望通りの動作をするようになりました！。 >　表示している文字(text）のほうを識別子に利用するとか（これも変わるのかなぁ？）、変更の可能性があるのと、保存数が巨大計算表×数パターンで300項目ぐらいになるので、(汗 textだとvalueよりサイズが大きくなってしまい一部の懸案箇所のみに導入でもCookieの容量制限4KBに引っ掛かりそうなんです。逆に、valueの一部だけを保存する方式にすれば今でも心許ないCookieサイズの大幅削減にも繋がって一石二鳥です(^^)。 >　単純な識別子を用いてデータセットを特定する考え方にするのが良いかと思う。（データセットの中身は書き換えるということなので）ということで、valueの一つを連番にして持たせようと思ったんですが・・不味いのかな？。(汗今回教えて頂いた箇所はずっと修正したかったんですけどあちこち探しても手本として使えそうなサンプルや解説が見つからず困ってました。ネットのどこにもない方法を教えて頂いて大変助かりました。ありがとうございました！。m(＿)m

その他の回答 (1)

fujillin
ベストアンサー率61% (1594/2576)

2008/12/03 22:20 回答No.1

よく理解してないけど・・・クッキーから読み込んだ値と、各optionの値を「,」でsplitした先頭（？）の値とを比較して、一致したらそのオプションということで良いのでは？そもそも、こちら側で附番できる管理用番号という感じであるならば、オプションのインデックス番号を識別子として使用しておけば、照合作業も不要になると思うけど・・・それとも、オプションの内容の順番が入れ替わるとか、オプションの数も変化してしまうということなのだろうか？照合しても、存在しない場合もあるということ？いまいち状況が把握できてないので、外していたら失礼。

質問者

お礼 2008/12/04 00:46

> それとも、オプションの内容の順番が入れ替わるとか、オプションの数も変化してしまうということなのだろうか？ value要素の数と勘違いしてました、orz そうなんです、セレクトの選択項目を時々追加してるので、OPTIONの数や順番は変化します。だからOPTIONの一番上から[0]～[30]という風に自動で連番を振られると、これまた後で順番を入れ替えできなくなってしまって困るんです・・。　　　　　　　　　　value要素の数は一定　　　　　　　　　　　↓　↓　↓　↓ <OPTION value="1,11,111,b01">1</OPTION> <OPTION value="2,22,222,b02">2</OPTION> 　　　　　　　　　　　～～～～　・・・・ <OPTION value="9,99,999,b09">9</OPTION>　←OPTION(選択項目)が増えたり順番(上下の配置)が変わったりはする

質問者

補足 2008/12/03 23:03

ご回答ありがとうございます！。 > クッキーから読み込んだ値と、各optionの値を「,」でsplitした先頭（？）の値とを比較して、一致したらそのオプションということで良いのでは？こんなのかな？パズルの様にsplit(',')[]の置き場所を色々試してみたんですけど上手くいかず・・。 http://kissho.xii.jp/1/src/1jyou57019.html function set_cookie(){ o=document.getElementById('myform'); var v =[]; v[0] = o.a.value; v[1] = o.b.value.split(',')[0];　//「,」で分離して[0]のみ保存 saveCookie( o.selectsave.value, v.join('/'),30); document.getElementById('sample').value=v.join('/'); } function get_cookie(){ var o=document.getElementById('myform'); var GET=loadCookie(o.selectsave.value).split('/'); document.getElementById('sample').value=loadCookie(o.selectsave.value);//sapmle setvalue(document.getElementById('myform').a, GET[0]); setvalue(document.getElementById('myform').b.value.split(',')[0], GET[1]);//←ここをどうにかすれば良いと思ってるんですけど・・ > そもそも、こちら側で附番できる管理用番号という感じであるならば、オプションのインデックス番号を識別子として使用しておけば、照合作業も不要になると思うけど・・・ネット上のサンプル(この保存プログラムも過去ログを参考に・・)などを見ながら改造している様な状態でして、、(＾＾；；やり方がわかりません。　orz > 照合しても、存在しない場合もあるということ？いえ、数値が少し修正されるだけで、「100」が「95」になったり「110」になったりという程度です。しかし、ちょっとでも数値を修正すると照合できないので、数値とは別に照合用の連番を持たせられないかと。