【やりたいこと】
-
- "kettei"をタップすると"rslt"に数値が出力され、localStorageにデータが保存される
3.tableの下に"goukei"欄を作成し、tableに出力された金額の合計を「合計"goukei"円」と表示する
4."rslt"-"goukei"="result"と出力し、localStorageにデータが保存される
2. 1. "remove"を押すと当該の行だけ削除
【困っていること】
- localStrageにデータが保存される仕組みはなんとなくわかったのですが、今のデータを保存、出力する具体的なコードがわかりません。
参考になるサイトや具体的なコードを教えていただければ幸いです…。
jQueryには保存する方法だけ記載してそのまま手が動かなくなりました。
2. 現状のコードでは増えた行全部が消えてしまいます…
【参考コード】
</head> <body> <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span>menu</span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content"> <form id="settei" oninput="rslt.value = Number(settei.value);"> <p>上限設定</p> <p><input type="number" name="settei">円</p> </form> <input type="button" value="決定" class="ketei" onclick="nav-close"> </div> </div> </header> <div class="main"> <div class="jougen"> <p>課金上限</p> <p><output name="rslt" form="settei">0</output>円</p> </div> <div class="honbun1"> <p>入力</p> <div style="display:inline-flex"> <form id="f1"> <div class="moji"> <input type="date" name="day" id="day" class="day"> <input type="number" class="money" name="money" id="money"> 円 <input type="submit" value="入力" class="kettei1"></div> </form> </div> </div> <div class="nokori"> <p>今月の残り課金額</p> <p><output name="result" >0</output>円</p> </div> <br> <form id="f2"> <p>履歴</p> <div class="rireki"> <table id="t1" border="1"> <thead> <tr> <th width="30%">日付</th> <th width="50%">金額</th> <th width="20%">削除</th> </tr> </thead> <tbody> </tbody> </table> </div> </form> <input type="reset" value="クリア"> </div> </html>
// This is a JavaScript file $(function () { /* ここにjQueryのコードを記述 */ /* 履歴表示 */ $('#f1').on('submit', function (e) { e.preventDefault(); var v_day = $("#day").val(); var v_money = $("#money").val(); if (v_day !== "" && v_money !== "") { $('#t1 tbody').after($('<tr>').append($('<td>').text(v_day)).append($('<td>').text(v_money)).append($('<td>').html('<button class="remove">-</button>'))); $("#day,#money").val(""); } }); /* 削除ボタン作動 */ $('#f2').on('remove' , function (e) { e.preventDefault(); $(this).parents(tr).remove(); }) /* 配列をJSON 形式に変換して格納 */ localStorage.setItem("divData", JSON.stringify(data)); });
追記:簡単な「課金上限」を保存するところからやってみました。
localstrageには保存されるのですがページを更新すると「課金上限」の金額が0円に戻ってしまいます。
なぜでしょうか…?
HTML
1<!DOCTYPE HTML> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <link rel="stylesheet" href="css/main.css"> 9 <script src="js/jquery-3.3.1.min.js"></script> 10 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 11 <script type="text/javascript" src="js/main.js"></script> 12 13 <title>メイン</title> 14 15 </head> 16 <body> 17 <header> 18 <div id="nav-drawer"> 19 <input id="nav-input" type="checkbox" class="nav-unshown"> 20 <label id="nav-open" for="nav-input"><span>menu</span></label> 21 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 22 <div id="nav-content"> 23 <form id="settei" oninput="rslt.value = Number(settei.value);"> 24 <p>上限設定</p> 25 <p><input type="number" id="kakin">円</p> 26 </form> 27 <input type="button" value="決定" class="ketei" onclick="nav-close" id="kettei"> 28 </div> 29 </div> 30</header> 31 <form id="f3"> 32 <div class="main"> 33 <div class="jougen"> 34 <p>課金上限</p> 35 <p><output id="rslt" form="settei" class="jogen">0</output>円</p> 36 </div> 37 </form> 38 <div class="honbun1"> 39 <p>入力</p> 40 <div style="display:inline-flex"> 41 <form id="f1"> 42 <div class="moji"> 43 <input type="date" name="day" id="day" class="day"> 44 <input type="number" class="money" name="money" id="money"> 円 45 <input type="submit" value="入力" class="kettei1"></div> 46 </form> 47 </div> 48 </div> 49 <div class="nokori"> 50 <p>今月の残り課金額</p> 51 <p><output name="result" >0</output>円</p> 52 </div> 53 <br> 54<form id="f2"> 55<p>履歴</p> 56<div class="rireki"> 57<table id="t1" border="1"> 58<thead> 59<tr> 60<th width="30%">日付</th> 61<th width="50%">金額</th> 62<th width="20%">削除</th> 63</tr> 64</thead> 65<tbody> 66</tbody> 67</table> 68</div> 69</form> 70 <input type="reset" value="クリア"> 71 </div> 72</html>
jQuery
1/// This is a JavaScript file 2$(function () { 3 4 /* ここにjQueryのコードを記述 */ 5 /* 履歴表示 */ 6 $('#f1').on('submit', function (e) { 7 e.preventDefault(); 8 var v_day = $("#day").val(); 9 var v_money = $("#money").val(); 10 if (v_day !== "" && v_money !== "") { 11 $('#t1 tbody').after($('<tr>').append($('<td>').text(v_day)).append($('<td>').text(v_money)).append($('<td>').html('<button class="remove">-</button>'))); 12 $("#day,#money").val("");} 13 }); 14 15 /* 削除ボタン作動 */ 16 $('#f2').on('remove' , function (e) { 17 e.preventDefault(); 18 $(this).parents(tr).remove(); 19 }) 20 21/* セッションストレージ設定 */ 22 var storage = localStorage; 23 24/* 課金上限 保存 */ 25 $("#kettei").click(function() { 26 storage.setItem("jogen", $("#kakin").val()); 27 28/* 課金上限 表示 */ 29 var value = storage.getItem("jogen"); 30 $("#rslt").text(value); 31}); 32 33 34/* 終了タグ */ 35}); 36
追記:JSONに変更して保存するところまでうまくいったと思うのですが…
保存したデータを表示すると{"data1":"#day","data2":"#money"}
と表示されました。
これをデータ形式で表示する方法はありますでしょうか…?
jQuery
1/* 履歴を保存 */ 2$('#f1').on('submit', function (){ 3 var datalist = { 4 data1: "#day", 5 data2: "#money" 6 } 7 storage.setItem("datalist",JSON.stringify(datalist)); 8 9/* 履歴を取得 */ 10var str = localStorage.getItem("datalist"); 11var obj = JSON.parse(str); 12}) 13 14/* 履歴を表示 */ 15$(document).ready( function(){ 16 var value = storage.getItem("datalist"); 17 $("#t1 tbody").text(value); 18}); 19
追記:履歴部分のコードを自分なりに書いてみたのですが、何かが間違っているらしく全く動きません…
間違っている箇所があればご指摘いただけたら幸いです…。
/* 履歴を保存 */ $('#f1').on('submit', function (){ var datalist = { data1: $("#day").val(), data2: $("#money").val() } storage.setItem("datalist",JSON.stringify(datalist)); /* 履歴を取得 */ var str = localStorage.getItem("datalist"); var obj = JSON.parse(str); }) /* 履歴を表示 */ $(document).ready( function(){ // 登録されているkey, valueを順に取得して表示 var tr = $("<tr></tr>"); var td1 = $("<td></td>"); var td2 = $("<td></td>"); var td3 = $("<td></td>"); $("list").after(tr); tr.append(td1).append(td2); td1.html(ls.getItem(.data1)); td2.html(ls.getItem(.data2)); td3.html('<button class="remove">-</button>'); })
4/10追記
localstrageにデータが保存されるようになった、テーブルもページ更新したら出るようになったのですが、テーブルの中にデータがはいりません。
ここのコードが間違っているだろう、というのはわかるのですが色々やってみても解消しません。
どうしたら良いでしょうか…?
ちなみにlocalstrageの名前はstrageにしています。
/* 履歴を保存 */ $('#f1').on('submit', function (){ var obj = { data1: $("#day").val(), data2: $("#money").val() } storage.setItem("datalist",JSON.stringify(obj)); /* 履歴を取得 */ var str = storage.getItem("datalist"); var obj = JSON.parse(str); }) /* 履歴を表示 */ $(document).ready( function(){ /* 登録されているkey, valueを順に取得して表示 */ var tr = $("<tr></tr>"); var td1 = $("<td></td>"); var td2 = $("<td></td>"); var td3 = $("<td></td>"); $("#list").after(tr); tr.append(td1).append(td2).append(td3); $("#td1").strage.getItem('data1'); $("#td2").strage.getItem('data2'); $("#td3").html('<button class="remove">-</button>') })
4/11 追記
思い切ってjQueryを書き直してみました。
選択した行だけ削除はできるようになったのですが、1回しか削除されないところと、ページを更新した時に履歴が表示されず困っています。
何か手立てはありますでしょうか…?
// This is a JavaScript file $(function () { /* ここにjQueryのコードを記述 */ /* ローカルストレージ設定 */ var storage = localStorage; $('#f1').on('submit', function (e){ e.preventDefault() /* 履歴を保存 */ var key = $("#day").val(); var value = $("#money").val(); /* key,valueに値が入っているかチェック */ if (key && value) { storage.setItem(key, value); } /* いったん中身を空にする */ $("#list").empty(); /* localStorageすべての情報の取得 */ for (var i=0; i < storage.length; i++){ var _key = storage.key(i); /* 登録されているkey, valueを順に取得して表示 */ var tr = $("<tr></tr>"); var td1 = $("<td></td>"); var td2 = $("<td></td>"); $("#list").append(tr); tr.append(td1).append(td2).append($('<td>').html('<input type="button" value="-" id="remove">')) td1.html(_key); td2.html(storage.getItem(_key)); } }); /* 選択した列のデータを削除 */ $(document).on( "click" , "#remove" , function(){ var key = $("#day").val(); storage.removeItem(key); key = ""; window.location.reload(); }); /* 全てのデータを削除 */ $("#clear").click(function() { storage.clear(); window.location.reload(); }); /* 課金上限 保存 */ $("#kettei").click(function() { storage.setItem("jogen", $("#kakin").val()); /* 課金上限 表示 */ var value = storage.getItem("jogen"); $("#rslt").text(value); }); /* リロードした時のに課金上限・履歴を表示*/ $(document).ready( function(){ var value = storage.getItem("jogen"); $("#rslt").text(value); var key = $("#day").val(); var value = $("#money").val(); storage.getItem(key,value) }); /* 終了タグ */ });