jQueryで選択した行だけ削除、localStorageの処理

【やりたいこと】

1. "kettei"をタップすると"rslt"に数値が出力され、localStorageにデータが保存される
2."day"と"money"に数値を入力し、"kettei1"をタップするとtableに列と"day""money"が出力され、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)
});



/* 終了タグ */
});

m.ts10806

2019/03/31 03:12 編集

回答をどの程度理解して解決とされたのでしょうか。 https://teratail.com/help/question-tips#questionTips4-2 ベストアンサーに選んだ回答にコメントつけてください。

退会済みユーザー

2019/03/31 08:40

すみませんベストアンサーを付けたつもりがなかったです… スマホで見ていた際に間違って押してしまったんだと思います。もうしわけありません。

m.ts10806

2019/03/31 08:44

了解です

行動規範の内容に同意します

回答2件

参考になるサイトや具体的なコードを教えていただければ幸いです…。

まだ使ったことがないかもしれませんが、Google という会社が検索サービスを提供していて、ある程度のキーワードを入れると関連しそうなWebページを教えてくれます。

localstorage で検索すると、例えば下記のような使用例まで書かれたページが見つかるので、実際にコードをまねしながら書いてみましょう。

【WebStorage API(LocalStorage)を使ってみた - Qiita】
https://qiita.com/masamitsu-konya/items/c69515604570150d3ab9

【localStorageで複数のデータを保存する｜ Tips Note by TAM】
https://www.tam-tam.co.jp/tipsnote/javascript/post5978.html

【【サンプル付き】Local Storageとは？使い方を詳しく解説 | webliker】
https://webliker.info/how-to-use-localstrage/

【ブラウザにデータを保存するlocalStorage（ローカルストレージ）の使い方 | 株式会社グランフェアズ】
https://www.granfairs.com/blog/staff/local-storage-01

現状のコードでは増えた行全部が消えてしまいます…

編集の内容を保存していないからです。また、保存した物を取り出すコードが書かれていません。

一日考えても全くわかりません

わからないことは調べましょう。Webの情報は「体系立てた情報」で無いことが多いので、一度本屋で（入門から中級くらいまで）何冊か本を買って読むと言う方法をお勧めします。

追記：

追記：簡単な「課金上限」を保存するところからやってみました。

保存した物をページが呼び出されたタイミングで取り出すコードが書かれていません。

追記：

保存したデータを表示すると{"data1":"#day","data2":"#money"}と表示されました。

下記部分は#dayという文字列を入れているだけなので、本当にそれを保存したかったのか考えましょう。そう書いても保存した時にinput要素に入っている内容は取得されないし、再利用できません。

js
1  var datalist = {
2     data1: "#day",
3     data2: "#money"
4  }

js
1  var datalist = {
2     data1: $("#day").val(),
3     data2: $("#money").val()
4  } // 書くならこう。

で、datalist の値からHTMLに反映させる方法は$('#t1 tbody').after/*省略*/で書いている方法とだいたい同じです。

投稿2019/03/30 18:53

編集2019/04/08 03:38

kei344

総合スコア69400

kei344

2019/04/09 05:53

（2019/04/09 14:43の追記に対して） storageとかlsとか定義されていない物を使おうとしても動きませんよ。 localStorageを利用する前に、配列にオブジェクトを入れて、それを取り出すコードを書いてみましょう。ステップを飛ばして勉強するより、1段1段少しずつ勉強しましょう。

退会済みユーザー

2019/04/09 06:08 編集

ありがとうございます！lsの部分をlocalStrageにしたら動きました！意味がわからず使っているものが多いので、一つずつ理解していこうと思います。

kei344

2019/04/10 09:14

$("#td1").strage.getItem('data1'); これで何が起こると思ったのでしょう。 $("#td1")はもしかして直前の変数td1に入っているHTML要素が勝手に入ると思ったのでしょうか。ちなみに要素が取得できていたとしても、$("#td1").strageってjQueryオブジェクトに「無い」プロパティにアクセスしています。どこにも値を入れる処理がされていません。「要素を選択して、その中に値を入れる」という基礎部分を見直してください。下記方法で追加はできたのでは？ならその内容を置き換えることからはじめればよいのに。 $('#t1 tbody').after($('<tr>').append($('<td>').text(v_day)).append($('<td>').text(v_money)).append($('<td>').html('<button class="remove">-</button>'))); あと、strage.getItem('data1')と書いても入れていない要素を取得できませんよね。datalistに入れてたのでは？ちなみにdatalistにはいるのは単一のobjを文字列化したものなので、複数要素を扱えません。

退会済みユーザー

2019/04/10 09:29

$('#t1 tbody').after($('<tr>').append($('<td>').text(v_day)).append($('<td>').text(v_money)).append($('<td>').html('<button class="remove">-</button>'))); はいらないと思って消していました…これを弄ればよかったんですね。ありがとうございます… >ちなみにdatalistにはいるのは単一のobjを文字列化したものなので、複数要素を扱えません。ということは日付と金額二つのkeyを作成しなければいけないということで認識は間違っていないでしょうか？

kei344

2019/04/10 09:38

配列の中にオブジェクトは入れられます。入門書を買って読んでください。今回試されているコードはゴールが遠すぎます。 01. 変数と配列操作（配列に必要な物を追加、特定の値を削除） 02. HTML操作（jQueryを用いた要素の作成／削除） 03. HTML操作を変数を基に行う（配列の内容を順番にHTMLにしていく操作） 04. イベント操作（クリックイベント時に配列に情報を追加／削除） 05. localStorageにデータを格納／取り出しこの順番くらいで処理の仕方を勉強しないとゴールに辿り付けません。今、手間取っておられるのは「01」の変数の部分です。

退会済みユーザー

2019/04/10 09:49

もうちょっとだと思っていたのに全然だったんですね… ありがとうございます

退会済みユーザー

2019/04/10 11:46

var v_day = obj.data1; var v_money = obj.data2; if (v_day !== "" && v_money !== "") { $('#t1 tbody').after($('<tr>').append($('<td>').html(v_day)).append($('<td>').text(v_money)).append($('<td>').html('<button class="remove">-</button>'))); $("#day,#money").val(""); } }); でできました！ありがとうございます！

kei344

2019/04/11 11:22

追記（04/11）に対して： localStorage使わずに1回やってからlocalStorageに挑戦しましょう。既に書いたとおり、ゴールの設定が間違っています。

行動規範の内容に同意します

保存したいデータが決まってるなlocalStorageの使い方通りに保存して取り出せば良いだけなので、まずコードを書きましょう。
保存、取得、削除の３つくらいしか主に覚えることはありませんし、調べればすぐです。
(それに、前の質問の回答にQiitaというサイトでMonacaでlocalstorage利用するという観点の文章がある記事のリンクを貼っています)

いきなり今やろうとしている本チャンコードに仕込もうとするのではなく、もっと簡単なミニマムコードから試して「できること、できないこと」が自分で理解するように進めらてはどうでしょうか。

固定値を保存、取得、削除する
入力された値を以下同文
複数の値を以下同文
配列を以下同文
本チャンコードへの適用方法を考える

以下略

追記：

これをデータ形式で表示する方法

「データ形式」というのはどういうことでしょうか。
単語を使うよりも望む結果を書いたほうが良いかと思います。
また、JSON.parse()の結果はオブジェクト、というかわかりやすく言うと連想配列なので、JavaScriptの連想配列として値を取り出して適宜使いましょう。

投稿2019/03/30 21:57

編集2019/04/08 03:28

m.ts10806

総合スコア80850

退会済みユーザー

2019/04/08 03:38

ありがとうございます。日付、金額が入ったテーブルをそのまま保存したいということでした。そしたら削除ボタンを押した際に削除したい列だけ削除できるのではないかと思って… 連想配列のリンクありがとうございます。頑張ってみます。

m.ts10806

2019/04/08 03:50

テーブル自体を保存しようと思ったらhtmlを保存となるので「何行目の値」という形で紐づけて保存されたほうが扱いやすくなると思います（LocalStorageには容量上限があるので）

退会済みユーザー

2019/04/08 05:43

htmlの何行目のコードということですね、やってみます！ありがとうございます！

m.ts10806

2019/04/08 05:50

いや、ちょっと違うように思います。データベースをイメージできたら早いのですが、データの持ち方はレコードID(何行目)のどの項目の、という持ち方をします。それが何行もあるわけですね。連想配列も概念は同じです。例えば学校のクラスで、１学年だけとして、１組2組…がレコード。出席番号が項目名としましょう。すると、１組の１番は「赤木」さん、２組の１番は「浅井」さんとして、中身は違いますが「出席番号１番」という項目は変わりません。

退会済みユーザー

2019/04/09 10:18

色々調べてやっとわかりました… var datalist = { data1: $("#day").val(), data2: $("#money").val() } ここが連想配列なのですね。これをうまいことhtmlと合わせて紐づければいいのですね…まだ難しいですが頑張ります

m.ts10806

2019/04/09 10:20

はい。連想配列が使えるようになればやれることの幅が広がります。がんばってください。

行動規範の内容に同意します

あなたの回答