リロードした時に前に登録した要素を取得する

前提・実現したいこと

Monacaでアプリを作っています。
入力ボタンを押した際にtable bodyが増えていき、そこにinputから文字を入力しているのですが、inputボタンを押した際に実行される処理の途中から（表にlocalstorageの内容を出力するところ）再度同じ処理を実行したいのですが、同じコードを書くのはスマートじゃないと思って四苦八苦しています。
今のコードは一回ウインドウを更新して、その時に表を表示するようになればいいなと思って書いているのですが、うまくいきません。
何か手立てがあればご教授いただけたら幸いです。
初心者な質問で申し訳ないのですが、よろしくお願いいたします。

発生している問題・エラーメッセージ

ページをリロードするとtableが消えてしまう

該当のソースコード

jquery
1/* ローカルストレージ設定 */
2  var storage = localStorage;
3  
4  /* 履歴を保存 */
5  $('#f1').on('submit', function (e) {
6    e.preventDefault()
7    var obj = {
8      day: $("#day").val(),
9      money: $("#money").val()
10    }
11    var i = Math.floor(Math.random() * 101);
12    storage.setItem("datalist" + i, JSON.stringify(obj));
13    
14    /* 履歴を取得 */
15    var str = storage.getItem("datalist" + i);
16    var obj = JSON.parse(str);
17    window.location.reload();
18    $(document).ready(function () {
19      
20      /* いったんデータを全部消す */
21      $("#list").empty();
22      
23      /* 全ての要素を取得する */
24      for (i = 0; i < storage.length; i++) {
25        var key = storage.key(i)
26        storage.getItem("datalist" + i)
27      }
28      
29      /* 登録されているkey, valueを順に取得して表示 */
30      var v_id = "datalist" + i;
31      var v_day = obj.day;
32      var v_money = obj.money;
33      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>')));
34      $("#day,#money").val("");
35    });
36  });
37

HTML
1     <div class="main">
2      <form id="f3">
3        <div class="jougen">
4          <p>課金上限</p>
5          <p>
6            <output id="rslt" form="settei" class="jogen">0</output>円
7          </p>
8        </div>
9      </form>
10      <div class="honbun1">
11        <p>入力</p>
12        <div style="display:inline-flex">
13          <form id="f1">
14            <div class="moji">
15              <input type="date" name="day" id="day" class="day">
16              <input type="number" class="money" name="money" id="money">円
17              <input type="submit" value="入力" class="kettei1">
18            </div>
19          </form>
20        </div>
21      </div>
22      <div class="nokori">
23        <p>今月の残り課金額</p>
24        <p>
25          <output name="result" >0</output>円
26        </p>
27      </div>
28      <br>
29      <form id="f2">
30        <p>履歴</p>
31        <div class="rireki">
32          <table id="t1" border="1">
33            <thead>
34              <tr>
35                <th hidden>id</th>
36                <th width="30%">日付</th>
37                <th width="50%">金額</th>
38                <th width="20%">削除</th>
39              </tr>
40            </thead>
41            <tbody id="list"></tbody>
42          </table>
43        </div>
44      </form>
45      <input type="button" value="クリア" id="clear">
46    </div>
47  </body>

試したこと

データを全部消す前で一回切って新しく$(document).ready( function()で始めた
→obj.dayなどが上から引っ張られずにデータが入ってこなかった

途中でリロードしてHTMLを取り込んだ後の処理を入れた
→現状。一瞬だけtableが現れて消える

追記：できました！

jQuery
1/* ローカルストレージ設定 */
2	var storage = localStorage;
3	let datalist_st = storage.getItem('datalist');
4	/* 入力ボタンを押すとデータを取得する */
5	$(function() {
6		const day = $('#day').val();
7		const money = $('#money').val();
8
9		displayList();
10		$('#f1').on('submit', function(e) {
11
12			e.preventDefault()
13
14			if ($('#day').val() === '') {
15				alert('日付を入力してください');
16				return false;
17			}
18			if ($('#money').val() === '') {
19				alert('金額を入力してください');
20				return false;
21			}
22
23
24			if (datalist_st != null) {
25				datalist = JSON.parse(datalist_st);
26			} else {
27				datalist = [];
28			}
29
30			const row_data = {
31				day: $('#day').val(),
32				money: $('#money').val()
33			};
34
35			datalist.push(row_data);
36
37			storage.setItem('datalist', JSON.stringify(datalist));
38			$("#day,#money").val("");
39			window.location.reload();
40		});
41	});
42
43	function displayList() {
44		if (datalist_st != null) {
45			datalist = JSON.parse(datalist_st);
46		} else {
47			datalist = [];
48		}
49		for (i = 0; i < datalist.length; i++) {
50			let record_tr = $('<tr></tr>', {
51				id: 'row_' + i
52			});
53			const td_id = $('<td></td>', {
54				hidden: 'hidden',
55				html: i
56			});
57			const td_day = $('<td></td>', {
58				html: datalist[i].day
59			});
60			const td_money = $('<td></td>', {
61				html: datalist[i].money
62			});
63			const remove_btn = $('<button></button>', {
64				html: '-',
65				type: 'button',
66				class: 'remove'
67			});
68			remove_btn.attr('data-id', i);
69			const td_remove = $('<td></td>', {
70				html: remove_btn
71			});
72			record_tr.append(td_id);
73			record_tr.append(td_day);
74			record_tr.append(td_money);
75			record_tr.append(td_remove);
76			record_tr.append(td_remove);
77			$('#list').append(record_tr);
78		}
79		/* 選択した列のデータを削除 */
80		$("#list").click(function() {
81			let storageItem = JSON.parse(storage.getItem('datalist'));
82			const id = 'data-id';
83			const index = storageItem.findIndex((v) => v.id === id);
84			const removeid = storageItem.splice(index, 1);
85			storage.setItem('datalist', JSON.stringify(storageItem));
86			window.location.reload();
87		});
88	}
89
90
91	/*  全てのデータを削除 */
92	$("#clear").click(function() {
93		storage.clear();
94		window.location.reload();
95	});

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

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

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

試したこと

上記踏まえたうえで、自分なりにコードを（あまり元のコードのやり方を崩さずに）書いてみました。

関連した質問