1. My Question:

How to insert the data from localstorage to HTML by Javascript once the web is loaded.(Please check more detail in the item 4 below)

2. The image and the flow of my code below

3. Below is my code

<pre class="default s-code-block"><code><span><span><!DOCTYPE <span>html</span>></span> <span><<span>html</span> <span>lang</span>=<span>"en"</span>></span> <span><<span>head</span>></span> <span><<span>meta</span> <span>charset</span>=<span>"UTF-8"</span>></span> <span><<span>meta</span> <span>http-equiv</span>=<span>"X-UA-Compatible"</span> <span>content</span>=<span>"IE=edge"</span>></span> <span><<span>meta</span> <span>name</span>=<span>"viewport"</span> <span>content</span>=<span>"width=device-width, initial-scale=1.0"</span>></span> <span><<span>title</span>></span>Document<span></<span>title</span>></span> <span><<span>link</span> <span>rel</span>=<span>"stylesheet"</span> <span>href</span>=<span>"style.css"</span> /></span> <span></<span>head</span>></span> <span><<span>body</span>></span> </span><span><span><?php</span> <span>include</span>(<span>'./user_list.php'</span>) <span>?></span></span><span> <span><!-- 👇登入區塊 --></span> <span><<span>form</span> <span>action</span>=<span>"./insert.php"</span> <span>method</span>=<span>"post"</span> <span>enctype</span>=<span>"multipart/form-data"</span>></span> ID:<span><<span>input</span> <span>type</span>=<span>"text"</span> <span>name</span>=<span>"idd"</span>></span><span><<span>br</span>></span> Name:<span><<span>input</span> <span>type</span>=<span>"text"</span> <span>name</span>=<span>"user_name"</span>></span><span><<span>br</span>></span> <span><<span>input</span> <span>type</span>=<span>"submit"</span> <span>value</span>=<span>"記入"</span>></span> <span></<span>form</span>></span> <span><!-- 👇檢索區塊 --></span> <span><<span>form</span> <span>action</span>=<span>""</span> <span>id</span>=<span>"search"</span> <span>method</span>=<span>"post"</span> <span>enctype</span>=<span>"multipart/form-data"</span>></span> ID:<span><<span>input</span> <span>type</span>=<span>"text"</span> <span>name</span>=<span>"ss"</span> <span>id</span>=<span>"ss"</span>></span><span><<span>br</span>></span> <span><<span>input</span> <span>type</span>=<span>"submit"</span> <span>name</span>=<span>"submit"</span> <span>value</span>=<span>"検索"</span>></span> <span></<span>form</span>></span> </span><span><span><?php</span> <span>//$ID = null;</span> <span>//$member_name = null;</span> <span>// 👇利用isset來確認form中的資料有無被送出</span> <span>if</span>(<span>isset</span>(<span>$_POST</span>[<span>'ss'</span>])){ <span>$search</span> = <span>$_POST</span>[<span>'ss'</span>]; <span>$sql2</span> = <span>"SELECT * FROM user_list WHERE id = '<span>$search</span>' "</span>; <span>$sth2</span> = <span>$db</span> -> <span>prepare</span>(<span>$sql2</span>); <span>$sth2</span> -> <span>execute</span>(); <span>$data2</span> = <span>$sth2</span>-><span>fetch</span>(); <span>$sql10</span> = <span>"SELECT * FROM user_list WHERE ID in ('<span>$search</span>')"</span>; <span>$sth10</span> = <span>$db</span> -> <span>prepare</span>(<span>$sql10</span>); <span>$sth10</span> -> <span>execute</span>(); <span>$data10</span> = <span>$sth10</span>-><span>fetchall</span>(); <span>if</span>(<span>empty</span>(<span>$_POST</span>[<span>'ss'</span>])){ <span>echo</span> <span>'<script> alert("記入してください") </script>'</span>; }<span>else</span>{ <span>if</span>(<span>$data10</span> == <span>null</span>){ <span>echo</span> <span>'<script> alert("まだ登録されていないよ!!!") </script>'</span>; }<span>else</span>{ <span>$ID</span> = <span>$data2</span>[<span>"ID"</span>]; <span>$member_name</span> = <span>$data2</span>[<span>"member_name"</span>]; } } <span>// header("Location:./form.php");</span> <span>// exit(); </span> } <span>?></span></span><span> <span><<span>section</span> <span>class</span>=<span>"search_outcome"</span>></span> <span><!-- 👈包含全部結果的<section> --></span> <span><<span>div</span> <span>class</span>=<span>"title"</span>></span> <span><!-- 👈包含一項結果的<div>--></span> <span><<span>div</span> <span>class</span>=<span>"col_ID"</span>></span> <span><<span>input</span> <span>type</span>=<span>"text"</span> <span>value</span>=<span>"ID"</span> <span>readonly</span>></span> <span></<span>div</span>></span> <span><<span>div</span> <span>class</span>=<span>"col_name"</span>></span> <span><<span>input</span> <span>type</span>=<span>"text"</span> <span>value</span>=<span>"NAME"</span> <span>readonly</span>></span> <span></<span>div</span>></span> <span></<span>div</span>></span> <span><<span>div</span> <span>class</span>=<span>"list_for_all"</span> <span>id</span>=<span>"list_for_all"</span>></span><span></<span>div</span>></span> <span><!-- 👆一開始時先做個空區塊，待日後由JS帶入資料 --></span> <span></<span>section</span>></span> <span><<span>script</span>></span><span> <span>// 👇找尋form的ID</span> LIST_Storage = <span>JSON</span>.<span>parse</span>(<span>localStorage</span>.<span>getItem</span>(<span>'LIST_Storage'</span>)) || []; <span>//console.log(LIST_Storage);</span> <span>const</span> search = <span>document</span>.<span>querySelector</span>(<span>'#search'</span>); <span>// 如果console.log(search)的話，會得到form中所有的程式碼。</span> <span>const</span> outcome_list = { <span>ID_list</span>:<span>'</span></span></span><span><span><?=</span> <span>$ID</span> <span>?></span></span><span>', Member_list:'</span><span><span><?=</span> <span>$member_name</span> <span>?></span></span><span>'} //console.log(outcome_list); LIST_Storage.push(outcome_list); localStorage.setItem('LIST_Storage', JSON.stringify(LIST_Storage)); //console.log(LIST_Storage); DisplayOutcomes() function DisplayOutcomes () { const outcomeList = document.querySelector('#list_for_all'); //👈包含全部結果的<span><<span>div</span>></span> //console.log(outcomeList); outcomeList.innerHTML = ""; LIST_Storage.forEach(outcome_list => { const outcome_one_div = document.createElement('div'); //👈包含一項結果的<span><<span>div</span>></span> const col_ID = document.createElement('div');　//👈包含第一欄結果的<span><<span>div</span>></span> const col_NAME = document.createElement('div'); //👈包含第二欄結果的<span><<span>div</span>></span> const col_btn = document.createElement('div'); //👈包含2個按鈕的<span><<span>div</span>></span> const revise = document.createElement('button'); //👈"修改"的按鈕 const delete_btn = document.createElement('button'); //👈"刪除"的按鈕 //console.log(delete_btn); outcome_one_div.classList.add('list_for_one'); col_ID.classList.add('col_ID'); col_NAME.classList.add('col_name'); col_btn.classList.add('col_btn'); revise.classList.add('revise'); delete_btn.classList.add('delete'); col_ID.innerHTML = <input type=“text” value=“${outcome_list.ID_list}” readonly>; col_NAME.innerHTML = <input type=“text” value=“${outcome_list.Member_list}” readonly>; revise.innerHTML = '修正'; delete_btn.innerHTML = '削除'; col_btn.appendChild(revise); col_btn.appendChild(delete_btn); outcome_one_div.appendChild(col_ID); outcome_one_div.appendChild(col_NAME); outcome_one_div.appendChild(col_btn); outcomeList.appendChild(outcome_one_div); console.log(outcomeList); delete_btn.addEventListener('click', (e) => { LIST_Storage = LIST_Storage.filter(LIST_Storage => LIST_Storage != outcome_list); localStorage.setItem('LIST_Storage', JSON.stringify(LIST_Storage)); DisplayOutcomes() }) }) } <span></<span>script</span>></span> <span></<span>body</span>></span> <span></<span>html</span>></span> </span></code></pre>

4. What I tried and the problem that I occurred

・I made a function called 「DisplayOutcomes ()」 so that I can insert data into the HTML from localstorage.

・「function DisplayOutcomes ()」 can inserts the data to the HTML after I clicked “検索” button as the below picture.

・However, when I refresh the web, the data which is saved into the localstorage can’t be inserted into the HTML automatically without clicking the “検索” button.

・I tried to put 「function DisplayOutcomes ()」into 「window.addEventListener(‘load’, () => {})」, but it doesn’t works.