想到了兩個想做的新功能：

1. 加上刪除功能
2. 加上趨勢圖表

今天先了解程式碼，明天再實作。

刪除功能

思路

1. 每一筆資料在 report.html 的表格 會有一個「刪除」按鈕。
2. 按下去 → 把這筆資料的 index 找出來 → 從 localStorage 的陣列中刪掉。
3. 更新 localStorage → 重新渲染表格。

會用到的程式碼

• localStorage.getItem / setItem：存取資料。
• Array.splice(index, 1)：刪掉陣列某個元素。
• 事件監聽 (addEventListener)：監聽按鈕點擊。
• 重新渲染表格：清空舊的 tbody，再用更新後的資料重畫。

records.forEach((record, index) => {  // 注意這裡我加了 index
    const row = document.createElement("tr");

    const exerciseText = record.exercise === "yes" 
        ? "有" + (record.exercise_detail ? `，${record.exercise_detail}` : "")
        : "沒有";

    const medText = record.medication === "yes" 
        ? record.medication_time + (record.medication_name ? `，${record.medication_name}` : "")
        : "沒有";

    row.innerHTML = `
        <td>${record.date}</td>
        <td>${record.weight}</td>
        <td>${exerciseText}</td>
        <td>${medText}</td>
        <td>${record.bf_glucose}</td>
        <td>${record.af_glucose}</td>
        <td>${getGlucoseStatus(record.af_glucose)}</td>
        <td>${record.remark || ""}</td>
        <td><button class="deleteBtn">刪除</button></td>
    `;

    // 綁定刪除按鈕
    row.querySelector(".deleteBtn").addEventListener("click", function () {
        records.splice(index, 1); // 從陣列移掉這筆
        localStorage.setItem("records", JSON.stringify(records)); // 更新 localStorage
        row.remove(); // 從畫面移掉
    });

    tbody.appendChild(row);
});

血糖趨勢圖

思路

1. 引入一個繪圖套件，例如 Chart.js。
   • 用 <canvas> 標籤畫線圖、長條圖等。
2. 在 report.html 放一個 <canvas id="myChart">。
3. 把 localStorage 的血糖資料（餐前、餐後）整理成陣列。
   • labels = [日期1, 日期2, ...]
   • data1 = [餐前血糖1, 餐前血糖2, ...]
   • data2 = [餐後血糖1, 餐後血糖2, ...]
4. 呼叫 Chart.js API → 畫出線圖。

會用到的程式碼

• Chart.js：外部 JS 套件，要先在 <script> 引入。
• <canvas>：HTML 的畫布元素，Chart.js 就是畫在這裡。
• 資料轉換：把你存的物件陣列 records 拆成 labels 跟 data。

**Step1：**在 report.html 的表格上方，加一個 <canvas>

<h2 style="text-align:center;">餐後血糖趨勢圖</h2>
<canvas id="glucoseChart" width="400" height="200"></canvas>

Step2：在 <script> 裡加上繪圖程式碼
放在讀取 localStorage 的程式後面

<!-- 引入 Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const records = JSON.parse(localStorage.getItem("records")) || [];

    // === 取出日期 & 餐後血糖 ===
    const labels = records.map(r => r.date).reverse(); // 日期
    const afGlucoseData = records.map(r => r.af_glucose).reverse(); // 餐後血糖

    // === 建立圖表 ===
    const ctx = document.getElementById('glucoseChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: '餐後血糖',
                data: afGlucoseData,
                borderColor: 'blue',
                backgroundColor: 'rgba(0,0,255,0.1)',
                fill: true,
                tension: 0.2
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    title: {
                        display: true,
                        text: 'mg/dL'
                    }
                }
            }
        }
    });
});
</script>

差不多這樣，明天來實作上去。