今日學習目標

在前幾天，我們雖然讓網頁學會了新增與刪除，但最大的痛點就是，只要一按重新整理，之前的記帳就全部蒸發了T^T。
今天我們會將資料持久化 (localStorage) 補齊！

使用 localStorage

為了防止重新整理就歸零，我們利用瀏覽器的 localStorage 來把資料轉成字串存進硬碟裡：

• 讀取舊資料：當網頁一打開，先去 localStorage 撈資料。因為存進去的時候必須是字串，所以我們用 JSON.parse() 把字串轉回 JavaScript 的陣列；如果找不到資料，就給一個空陣列 []。

// 網頁開啟時，從 localStorage 讀取舊資料（沒有就給空陣列）
let expenses = JSON.parse(localStorage.getItem('my_expenses')) || [];

• 同步更新資料：每當使用者按下「新增」或「刪除」時，我們就把最新的陣列透過 JSON.stringify() 轉成字串，並用 setItem 存回 localStorage 裡。

// 新增或刪除資料時，同步更新 localStorage
localStorage.setItem('my_expenses', JSON.stringify(expenses));

小小心得
在實作這一段時，最深刻的體會是：「把畫面渲染與資料儲存拆開來」的重要性。當我們把資料統一管理在 expenses 陣列中，每次只要改動陣列並呼叫 renderExpenses()，畫面就會自動更新。這跟現代前端框架（如 React 的概念）非常相似，寫起來邏輯會變得超級清晰！