リロードしても更新データが残るようにする方法教えて

質問

ジャバスクリプトについてはまったくの素人です。
ジャバスクリプトを使って ラジオボタンで表示する画像をかえる機能を下記サイトから見つけました。
http://www.sky.sannet.ne.jp/masapine/java_gazou.html

この機能を同一Webページ内で繰り返して表示するやり方を最近OKWaveでご指南頂き、この
件については解決しました。
http://okwave.jp/qa/q6811231.html
（ありがとうございます。）

しかしながら、このページをリロードすると、元の状態に戻ってしまいます。
先のサイトで言えば「ねこ」を選んでもリロードするとデフォルトの「パンダ」に戻ってしまいます。

長くなりましたが、今回の質問は、これを、更新したデータがリロードしても残るようにしたいのですがその方法を教えて頂けないでしょうか。
やはりデータベースなどの知識と技術が必要でジャバスクリプトだけではできない問題なのでしょうか？

どなたか教えて頂ければ幸いです。
宜しくお願いします。

回答No.1

mikemike7 · ベストアンサー

>その方法を教えて頂けないでしょうか。
普通なら、クッキーを利用すると思います。
とはいえ、PHPなどで初期のチェックとか初期画像は操作することが多いと思いますが。

JavaScriptとクッキーだけでも実装可能なので、
おそらく前回のベストアンサーさんのをベースに作っておられると予想して、そのソースを元に無理やり改造してみました。

// ここからJavaScript部

<script type="text/javascript"><!--
imgck = new Array();
function Gazou(mysrc,num){
document.myIMG[num].src=mysrc;
imgck[num] = mysrc;
var ckbody = "";
for (var key in imgck) {
if(ckbody != ""){ckbody += ":";}
ckbody += key + "-" + imgck[key];
}
document.cookie="imgSelect="+ckbody+"; path=/; expires=Tue, 31-Dec-2030 23:59:59;";
}
function image_select(){
var ckarr = new Array();var arr = new Array();
if(document.cookie){
ckarr = document.cookie.split("; ");
for(var i = 0; i < ckarr.length; i++ ){
if(ckarr[i].indexOf('imgSelect=') === 0){
arr = ckarr[i].substr(10,ckarr[i].length).split(":");
break;
}
}
ckarr = new Array();
for(var i = 0; i < arr.length; i++){
ckarr = arr[i].split("-");
imgck[ckarr[0]] = ckarr[1];
if(document.myIMG[ckarr[0]] != null){
document.myIMG[ckarr[0]].src=ckarr[1];
}
if(document.imgForm[ckarr[0]] != null && document.imgForm[ckarr[0]].myRB.length){
for(var ii = 0; ii < document.imgForm[ckarr[0]].myRB.length; ii++){
if(document.imgForm[ckarr[0]].myRB[ii].value == ckarr[1]){
document.imgForm[ckarr[0]].myRB[ii].checked = true;
break;
}
}
}
}
}
}
window.onload=image_select;

--></script>

// ここからHTML部

<center>
<img name="myIMG" src="images/icons1.gif" border="0" width="32" height="32">
<br>
<FORM name="imgForm">
<INPUT type="radio" name="myRB" onClick="Gazou(this.value,0)" value="images/icons1.gif" checked>パンダ
<INPUT type="radio" name="myRB" onClick="Gazou(this.value,0)" value="images/icons2.gif">ペンギン
<INPUT type="radio" name="myRB" onClick="Gazou(this.value,0)" value="images/icons3.gif">ねこ
<INPUT type="radio" name="myRB" onClick="Gazou(this.value,0)" value="images/icons4.gif">ねずみ
<INPUT type="radio" name="myRB" onClick="Gazou(this.value,0)" value="images/icons5.gif">ライオン
</FORM>
</center>

<center>
<img name="myIMG" src="images/icons1.gif" border="0" width="32" height="32">
<br>
<FORM name="imgForm">
<INPUT type="radio" name="myRB" onClick="Gazou(this.value,1)" value="images/icons1.gif" checked>パンダ
<INPUT type="radio" name="myRB" onClick="Gazou(this.value,1)" value="images/icons2.gif">ペンギン
<INPUT type="radio" name="myRB" onClick="Gazou(this.value,1)" value="images/icons3.gif">ねこ
<INPUT type="radio" name="myRB" onClick="Gazou(this.value,1)" value="images/icons4.gif">ねずみ
<INPUT type="radio" name="myRB" onClick="Gazou(this.value,1)" value="images/icons5.gif">ライオン
</FORM>
</center>

// ここから説明

変更となった部分は、
１．FORMにnameをつけます。
　　すべての選択肢のFORMを<FORM>から<FORM name="imgForm">にしてください。
２．イメージ画像をvalue値に変更します。
　　<INPUT type="radio" name="myRB" onClick="Gazou('images/icons1.gif',0)">パンダ
　　形式から
　　<INPUT type="radio" name="myRB" onClick="Gazou(this.value,0)" value="images/icons1.gif">パンダ
　　形式にします。

ソースをベースに改造したので、もっとスマートな方法もあるかと思いますが、
IE6～8、FireFox、クローム、Opera、Safariで正常稼動確認済みです。

// 注意点
投稿前に気づいたけど、区切り文字を”-”としたので、画像フォルダ、または、画像名に-が入っている場合は正常に稼動しません＾＾；
入っている場合、手直ししますので、言ってください

デモ：
http://okwave.xrea.jp/javascript/test6820047/

お礼

できました！すごいです。私には正直このコードの意味はレベルが高く理解できませんが、完璧です。このようなレベルになるには沢山の経験をつまれているのだと思います。しかもとても親切に私のような素人にもできるようにわかり易く解説及びサンプルまで作っていただき本当に助かりました。回答いただいた文章と作成頂いたサンプルのコードを見ながら自分の作成したHTMLのページに真似しながら手を加えたらできてしまいました。ここでは言い切れないほど感謝します。本当にありがとうございます。