localStorageでのcheckbox制御

下記サイトを参考に、テキストボックスとチェックボックスをlocalStorageに保存するプログラムを作ってみました。
http://jsdo.it/twi_masa/hx8D

質問ですが、チェックやテキストを書いて保存ボタンを押すとlocalStorageに値が保存されることはchromeのデベロッパーツールで確認しました。
値がある状態でロードを押すとその保存された状態に復元されますが、それをロードボタンを押さずにページが読み込まれた直後に表示させる方法が知りたいです。

window.onload = function(){
処理
}
だと思い、
load : functionをwindow.onload = functionへ単純に変更しましたが、それでは保存もロード出来なくなってしまいました。

自分では全く書けないので、出来ましたらソースを書いていただけるとありがたいです。
よろしくお願いします。

<table>
<tr>
<td>テキスト</td>
<td><input type="text" id="text1" /></td>
</tr>

<tr>
<td>チェックボックス</td>
<td>
<input type="checkbox" id="checkbox1" value="0">チェック1
<input type="checkbox" id="checkbox2" value="0">チェック2
</td>
</tr>
</table>
<input type="button" value="保存" onclick="hx8D.save();">
<input type="button" value="ロード" onclick="hx8D.load();" />

<script>
var hx8D = function(){

var HX8D = function(){};
HX8D.prototype = {

save : function(){

var elements = document.getElementsByTagName("input");
for(var i=0; i<elements.length; i++){
var type = elements[i].type;
var key = elements[i].id;
if(type == "text"){
localStorage[key] = elements[i].value;
}else if(type == "checkbox"){
localStorage[key] = elements[i].checked;
}
}
},
load : function(){
var elements = document.getElementsByTagName("input");
for(var i=0; i<elements.length; i++){
var type = elements[i].type;
var key = elements[i].id;
if(type == "text"){
elements[i].value = localStorage[key];
}else if(type == "checkbox"){
elements[i].checked = localStorage[key] == "true" ? true : false;
}
}

},
};

return new HX8D();
}();
</script>

No.1 ベストアンサー 回答者： Ogre7077 回答日時： 2014/03/31 16:48

単に

<input type="button" value="ロード" onclick="hx8D.load();" />
と同じことを
window.onload = function(){ 処理 }
でも行えばOKです

<script>
var hx8D = function(){
...
}();
window.onload = function(){ hx8D.load() }
// 今風なら: window.addEventListener('DOMContentLoaded', function(){ hx8D.load() }, false);
</script>

この回答へのお礼

出来ました！

なるほど、ロードボタンの処理自体を最初に読み込ませてしまえばいいってわけですね。

window.addEventListenerの方は説明読んでも自分には良くわかりませんでしたが、DOMContentLoadedの方は「HTMLの解釈が終わった時点で呼び出される」理解出来ました。

またお見かけした時はよろしくお願いします。
ありがとうございました！

お礼日時：2014/04/01 05:50