下記サイトを参考に、テキストボックスとチェックボックスを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ベストアンサー
- 回答日時:
単に
<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の解釈が終わった時点で呼び出される」理解出来ました。
またお見かけした時はよろしくお願いします。
ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Javascriptの電卓で最初の何も...
-
テーブル内のチェックボックス...
-
Ifが正常に動作しない。
-
VBSでの自動ログイン
-
JavaScriptの「.querySelectorA...
-
追加したテキストボックスとテ...
-
複数のselect値で1つも選択され...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
hiddenのvalueの値を変えたい
-
onchangeイベントを強制的に発...
-
チェックボックスの設定
-
javascriptでASPにデータを渡す
-
テキストエリアをenterキーでフ...
-
クリックの度に加算していくには?
-
プルダウンで選択すると、DBの...
-
【jQuery】input nameの文字列...
-
フォームで入力した値を別のフ...
-
<td>の中のonClick="location" で
-
<JavaScript>tableタグを入力不...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptの「.querySelectorA...
-
複数のselect値で1つも選択され...
-
チェックボックス付きのテーブ...
-
ラジオボタンが選択されたらテ...
-
入力チェックの外部スクリプト...
-
Javascriptの電卓で最初の何も...
-
文字数を数える際に空白、改行...
-
画面の2重起動をチェックする...
-
画面表示とともにtableの指定の...
-
jQueryで合計を出したい
-
localStorageでのcheckbox制御
-
JavaScriptによる自動計算フォーム
-
同一nameの input type="text"...
-
テーブル内のチェックボックス...
-
formで項目を連結したい
-
クリックしたラジオボタンの行...
-
Javascriptで自動計算の合計の...
-
ラジオボタンを一括で操作する...
-
送信ボタン連打を抑止したいです
-
ボタン押下すると一行テキスト...
おすすめ情報