今天要來計算我們的BMI啦~~~
首先這裡提供一個沒有RWD的簡易版型
若有需求 可直接於CodePen fork下來就好

版型:https://codepen.io/wemyferb/pen/vYKYXxw

那接來就開始今天的教學了
首先
我們並不知道 localStorage 是否有資料
所以必須先看有沒有資料
若沒有資料 則將 data 設為空陣列

let data = JSON.parse(localStorage.getItem('listData')) || [];

由於我們需要取得
使用者所輸入的身高 體重並送出 最後將畫面呈現
且可以刪除單筆資料 或多筆資料
但若使用者沒有輸入資料則送出
會跳出錯誤訊息
所以必須先綁定DOM

let height = document.querySelector('.height');
let weight = document.querySelector('.weight');
let list = document.querySelector('.list');
let send = document.querySelector('.send');
let trash = document.querySelector('.trash');
let notice = document.querySelector('.notice');

綁定完就可以監聽它們所需的事件啦

send.addEventListener('click',calculate,false);
list.addEventListener('click',deleteData,false);
trash.addEventListener('click',removeData,false);

再來就開始撰寫各個函式
首先我們來撰寫calculate此函式內容

function calculate(e){
    e.preventDefault();
    // 若值為空 跳出錯誤訊息(Please Enter Your Information)
    //並利用setTimeout讓它3秒後消失
    if(height.value.trim()===''|| weight.value.trim()===''){
        $(".notice").show( notice.textContent = 'Please Enter Your Information'); 
        setTimeout(function() { 
            $(".notice").hide(); 
        }, 3000);
        return;
    }
    let content = {
        heightVal : height.value,
        weightVal : weight.value,
    }
    data.push(content);
    localStorage.setItem('listData',JSON.stringify(data));
    update(data);
    height.value = '';
    weight.value = '';
}

這裡先判斷是否有輸入值
trim()為將字串去空白
讓我們看MDN怎麼介紹
MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
接著
我們把值塞到一個物件(content)裡面
在把此物件塞到data陣列裡面
會像是

data = [
    {
        
        heightVal : height.value,
        weightVal : weight.value,
        
    }
]

data陣列塞完後
就可以把它轉字串()放到 localStorage裡面啦

JSON.stringify(data)

由於 你的localStorage要更新
當然 畫面也要更新
所以必須再加

  update(data);

最後再把使用者輸入的值清空

height.value = '';
    weight.value = '';

那今天的介紹就到這裡啦
明天我們將會介紹如何把資料呈現於畫面
有任何問題 或 內容有錯誤 都可以跟我說唷