質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

1741閲覧

localStorageでの保存

Gla

総合スコア12

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2015/11/11 13:51

学校で授業の出欠管理のアプリ(?)を作成中です。
これをローカルストレージで保存・読み込み・削除をしたいです。その方法を教えてください。
(必要ならば記載した部分のコードの変更等はしてもらって結構です。)

仕様的には現状を維持したいです。
・教科名をキーボード入力
・授業回数をキーボード入力
・休みのカウント
・メモをキーボード入力

HTML

1<div> 2 1教科授業数:<input class="text" id="classes" type="text" value="15" /> 3 <span id="ok"><input type="button" value="決定" id="decisionbtn"> 4 </span> 5 </div> 6 <div>最低出席数 :<input class="text"id="lowest" type="text" value="10" /> 7 </div> 8 9 <table id="school_schedule" border="1"> 10 <tr> 11 <th></th> 12 <th>月曜</th> 13 <th>火曜</th> 14 </tr> 15 <tr><!-- 1限 --> 16 <th>1限</th> 17 <td id="tdmon1"><!-- 月曜 --> 18 <div class="change">教科名月1</div> 19 <input type="button" value="休み" id="mon1"/>:<input type="button" value="修正" id="re_mon1"/> 20 <div class="count" id="count_mon1"></div> 21 <div class="change">メモ:<div> 22 </td> 23 <td><!-- 火曜 --> 24 <div class="change">教科名火1</div> 25 <input type="button" value="休み" id="tues1" />:<input type="button" value="修正" id="re_tues1"> 26 <div class="count" id="count_tues1"></div> 27 <div class="change">メモ:<div> 28 </td> 29 </tr> 30 </table>

JavaScript

1var click_count_mon1 = 0; click_count_tues1 = 0; upperlimit=""; 2 3//テキストその場編集 4(function(documet){ 5 6 $(document).ready(function(){ 7 $(".change").click(edit_toggle()); 8 }); 9 function edit_toggle(){ 10 var edit_flag=false; 11 return function(){ 12 if(edit_flag) return; 13 var $input = $("<input>").attr("type","text").val($(this).text()); 14 $(this).html($input); 15 16 $("input", this).focus().blur(function(){ 17 save(this); 18 $(this).after($(this).val()).unbind().remove(); 19 edit_flag = false; 20 }); 21 edit_flag = true; 22 } 23 } 24 function save(elm){ 25 26 } 27})(document); 28 29 30$(function(){ 31 //授業数指定 32 $("#decisionbtn").click(function(){ 33 upperlimit = $("input[id='classes']").val(); 34 $('#ok').text("OK!"); 35 36 //ボタンがクリックされたときの処理 37 //inputタグのtype属性buttonにアクセスするセレクタ 38 $(".count").text("0回"); 39 //休みボタンが押されたときの処理 40 $("#mon1").click(function(){//月曜1限 41 if(click_count_mon1 >= 0 && click_count_mon1 < upperlimit) { 42 click_count_mon1++; 43 $("#count_mon1").text(click_count_mon1 + "回"); 44 } 45 }); 46 47 48 $("#tues1").click(function(){//火曜1限 49 if(click_count_tues1 >= 0 && click_count_tues1 < upperlimit) { 50 click_count_tues1++; 51 $("#count_tues1").text(click_count_tues1 + "回"); 52 } 53 }); 54 55 //修正ボタンの処理 56 $("#re_mon1").click(function(){//月曜1限 57 if(click_count_mon1 > 0 && click_count_mon1 <= upperlimit){ 58 click_count_mon1--; 59 $("#count_mon1").text(click_count_mon1 + "回"); 60 } 61 62 }); 63 $("#re_tues1").click(function(){//火曜1限 64 if(click_count_tues1 > 0 && click_count_tues1 <= upperlimit){ 65 click_count_tues1--; 66 $("#count_tues1").text(click_count_tues1 + "回"); 67 } 68 }); 69 }); 70}); 71 72//テキストフォーカス 73$(function(){ 74 $(document).ready(function(){ 75 $(".text").click(function(){ 76 $(this).select(); 77 }); 78 79 }); 80});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

以下を参考にして下さい。

ローカルストレージを使ってみる

javascript

1//保存 2localStorage.setItem("キー", "保存する文字列"); 3 4//読み込み 5localStorage.getItem("キー"); 6

投稿2015/11/12 00:23

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問