ローカルストレージを用いて、
カウント(ポチポチ)みたいなものをjQueryで作っています。
- 上限をキーボード入力する
- プラス、マイナスボタンでカウントを増減させる
- ブラウザを閉じて開きなおしたり、リロードしても途中からカウントが再開される
- (リセットボタンでリセット)
上限の入力とボタンの操作はできたのですが、途中から再開させるということができません。
ローカルストレージに保存はされているのですが、リロード等をするとカウントが1から始まります。
どういうふうに書けばうまくできるのでしょうか?
ローカルストレージに保存はされていますので、リロード等したときのカウント表示は途中のが表示されます。
(増減ボタンを押すと1になりますが・・・)
(リセットボタンは、カウントでつまずいているのでついていませんが最終的にはつけます。)
HTML
1<div> 2 上限:<input class="text" id="classes" type="text" /> 3 <span id="ok"><input type="button" value="決定" id="decisionbtn"></span> 4</div> 5<input type="button" value="+" id="mon1"/>:<input type="button" value="-" id="re_mon1"/> 6<div class="count" id="count_mon1">0回</div>
JavaScript
1var click_count_mon1 = 0; 2$(function(){ 3 //ローカルストレージに内容が保存されていれば呼び出し 4 if(localStorage.getItem('key_upperlimit')) { 5 $('#classes').val(localStorage.getItem('key_upperlimit')); 6 var upperlimit = $("input[id='classes']").val(); 7 } 8 //ローカルストレージに内容が保存されていれば呼び出し 9 if(localStorage.getItem('key_count')) { 10 $("#count_mon1").text(localStorage.getItem('key_count') + "回"); 11 count_mon1 = $("input[id='count_mon1']" ).text(); 12 } 13 $("#decisionbtn").click(function(){ 14 //保存 15 localStorage.setItem("key_upperlimit", $('#classes').val()); 16 location.reload(); 17 18 }); 19 //プラスボタンボタンの処理 20 $("#mon1").click(function(){ 21 if(click_count_mon1 >= 0 && click_count_mon1 < upperlimit) { 22 click_count_mon1++; 23 //ローカルストレージに保存 24 localStorage.setItem("key_count", click_count_mon1); 25 } 26 //ローカルストレージに内容が保存されていれば呼び出し 27 if(localStorage.getItem('key_count')) { 28 $("#count_mon1").text(localStorage.getItem('key_count') + "回"); 29 count_mon1 = $("input[id='count_mon1']" ).text(); 30 } 31 }); 32 33 //マイナスボタンの処理 34 $("#re_mon1").click(function(){ 35 if(click_count_mon1 > 0 && click_count_mon1 <= upperlimit){ 36 click_count_mon1--; 37 localStorage.setItem("key_count", click_count_mon1); 38 } 39 if(localStorage.getItem('key_count')) { 40 $("#count_mon1").text(localStorage.getItem('key_count') + "回"); 41 count_mon1 = $("input[id='count_mon1']" ).text(); 42 } 43 }); 44});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。