- ベストアンサー
セレクトメニューをクッキーに書き込むには？
セレクトメニュー（URLs)にURLをつぎつぎに放り込んで、つぎにこのデータをクッキーに保存したいと想い、次のように書いてみました。この一文かどうかはわかりませんが、コンマがありません、というエラーが出ます。 data_for_cookie=document.form1.URLs.options.value; ホントに初歩的な知識が欠けていてこんなJavaScriptでさえわかりません。どうか御教示をお願いいたします。
- tonka729
- お礼率63% (107/168)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
補足されたソース見ました。 エラーになっているのは、「Set-Cookie:～」の行が原因でしょう。 これはPerlを使ったCGIでcookieを保存する時の書式です。 JavaScriptのケースでは、前回の回答に書いたように、「document.cookie=保存する内容」という形式で処理を記述する必要があります。 あと、Cookieを読み出す部分や書き込む部分で、このままではうまくないかなと思える点もあります。 前回の質問で提示したソースと同じようですので、それを元にしてお望みの動作を一応実装したソースを作ってみました。 こちらを試してみてください。 <html> <head> <title></title> <script type="text/javascript"><!-- getc=document.cookie+";"; x1=getc.indexOf("urls"); if (x1!=-1) { tem1=getc.substring(x1-1); x2=tem1.indexOf("="); x3=tem1.indexOf(";"); urls_data0=tem1.substring(x2+1,x3); urls_data=unescape(urls_data0); CkOpt=urls_data.split("<>"); } /* 以上、cookieの読み出しとデータの取得 */ function readOpt(){ if (x1!=-1){ for (i=1; i<CkOpt.length; i++){ document.form1.URLs.options[i]= new Option(); document.form1.URLs.options[i].text=CkOpt[i-1]; } } } /* ↑ページロード時にcookieがあった場合、そのデータを組み込む関数 */ function putOpt(){ n=document.form1.URLs.length; document.form1.URLs.options[n]= new Option(); document.form1.URLs.options[n].text=document.form1.url_in.value; document.form1.url_in.value="http://"; document.form1.url_in.focus(); } function f1move(){ n=document.form1.URLs.selectedIndex; if (n!=0){ parent.frame1.location.href=document.form1.URLs.options[n].text; } } function optDel(){ n=document.form1.URLs.selectedIndex; if (n!=0){ document.form1.URLs.options[n]=null; document.form1.URLs.options[0].selected=true; } } /* ↑特定のoptionを消去する関数 */ function cook(){ urls_data=""; if (document.form1.URLs.options[1]!=null){ for (i=1; i<document.form1.URLs.length; i++){ urls_data+=document.form1.URLs.options[i].text+"<>"; } exptm="Thu, 1-Jan-2030 00:00:00 GMT"; } else { urls_data="none"; exptm="Sat, 25-Oct-2003 00:00:00 GMT"; } putc="urls="+escape(urls_data)+"; expires="+exptm; document.cookie=putc; } /* ↑Cookieを書き込む関数 */ window.onload=readOpt; window.onunload=cook; /* ページロード時、ページアンロード時に関数を実行させる指定 */ // --></script> <style type="text/css"><!-- --></style> </head> <body> <form name="form1" onSubmit="putOpt(); return false;"> <input type="text" name="url_in" size="40" value="http://"> <input type="submit" value="追加"> <br> <select name="URLs"> <option selected>選択してください</option> </select> <input type="button" value="移動" onClick="f1move()"> <input type="button" value="削除" onClick="optDel()"> </form> </body> </html> 前回の質問のソースを元に、cookieを使ったものに改造しました。 cookieを利用した場合、打ち間違いなどで利用できなかったり不要になったりしたoptionを消すことができなくなる可能性があるので、それを回避するために選択されているoption項目を消去する機能を追加してあります。 そのため、ページの移動もボタンで決定するように変えました。 加えて、はじめからある「選択してください」のoption項目が選択されている場合には、「移動」も「消去」も動作しないようにしてあります。 また、cookieの保存はページが移動(アンロード)したタイミングで関数を処理させて実行するようにしています。 ついでに、追加したoptionの項目が無かったり消されたりしてデータが追加されていない状態の場合は、cookieを破棄するようにもしてあります。 その他、詳細については、行ごとに行われている内容を検証して把握してみてください。 上記ソースは一応、WindowsMe上のIE6、Netscape 7.1、Opera 7.11で動作確認を取りました。 私もJavaScriptでcookieにアクセスするソースをしばらく書いていなかったので、あまりスマートではない部分もあるかもしれません。 私も勉強になりました。 長々と失礼しました。 参考になれば幸いです。
その他の回答 (1)
現状では、なにがどうエラーになっているのかが良くわからないので、ちょっと具体的なところまでは踏み込めませんが… とりあえず、cookieにJavaScriptからデータを送り込む場合は、 document.cookie=cookieに保存するデータ; という書式を取ります。 なお、cookieに保存するデータの形式は、必ず「key名=データ」という形で、キーとデータとの対応関係を明記する必要があります(そうしないと、どこまでがどういったデータなのかが保存できませんし、利用できません)。 cookieからデータを読み出す場合は、 cookie_data=document.cookie; のように、変数の中にdocument.cookieを読み込んでやればよいです。 なお、cookieのデータは、通常そのままの形では利用できないと思います。 何かしらの加工をしてやって、取得したい値を取り出す処理を入れる必要があるでしょう。 こちらの詳細については、参考URLで解説されていますので、そちらに一度目を通してみると良いと思います。 ご質問文に書かれている一行は、cookieに書き込むためのデータを取りまとめる変数にフォーム内のセレクトメニューのオプションの値を渡そうとしている文のようですが、書式としてoptionsの連番を加えていないので、正常にデータを参照できないこともあるかもしれません。 この場合は、 data_for_cookie=""; for (i=0; i<document.form1.URLs.options.length; i++){ data_for_cookie+=document.form1.URLs.options[i].value+","; // 区切りをつけるために末尾にカンマを追加しています。 } こういった書式を取るのが良いのではないでしょうか。 ただ、おそらく、エラーメッセージと例示されている部分はあまり関連がないのではないかと思います。 具体的な問題のあるところを特定するには、スクリプトの内容を補足していただく必要がありそうです。 よろしければ、ソースを補足してみて下さい。
補足
以下はほとんどの部分をgooの教えて！で教えていただいたものです。ちゃんと動きました。その後、クッキー書き込み、読み込みをするために私が書き加えてからエラーが発生しました。すでに書き込みのところからエラーになっているようです。 <script type="text/javascript"><!-- function putOpt(){ n=document.form1.URLs.length; document.form1.URLs.options[n]= new Option(); document.form1.URLs.options[n].text=document.form1.url_in.value; data_for_cookie=document.form1.URLs.options.value; alert(data_for_cookie); data_for_cookie=escape(data_for_cookie); Set-Cookie: NAME=data_for_cookie; Fri, 31-Dec-2030 23:59:59; document.form1.url_in.value="http://"; document.form1.url_in.focus(); } // --></script> <script type="text/javascript"><!-- function f1move(){ parent.frame1.location.href=document.form1.URLs[document.form1.URLs.selectedIndex].text; } // --></script> <script type="text/javascript"><!-- function getCookie(){ storedURLs =document.cookie; storedURLs = unescape(storedURLs); document.form1.URLs.options.value=storedURLs; } // --></script>
お礼
lead1976さま、＼(^^)／ 素晴らしいですね。びっくりです。なんとお礼を申したらよいか分かりません。 ご覧の通り、表の中に入れて、もう一つのフォームと棲み分けさせています： http://tovalis.or.tv/dic/tangokensaku.htm 前回も、その完成度に感服いたしましたが、今回さらに仕様が細かくて使いやすいですね。 試しに、URLを入れて表示を試してみましたら、どういう訳か、今回は表示の実行がされていません。。。 前回のソースをもう一度見て調べているところです。ぱっと分かるほどに早くなりたいです。。。
補足
lead1976さま、この文章は「お礼」のあと、書いて差し上げるものです。お詫びいたします。ちゃんと表示されるようになっていました。 どうも失礼しました。そして、もいいちど、丁寧に完全なスクリプトをプレゼントしていただき、ありがとうございました。勉強になりました。