在我們開發這套智慧用藥系統時，確保使用者的健康資料不會輕易遺失是最基本的要求。目前我們的系統雖然可以完美執行 CRUD 操作，但因為資料只存在瀏覽器的「暫存記憶體」中，只要一按下 F5 重新整理，所有剛輸入的藥物就會瞬間消失並恢復預設值。

今天，我們要利用瀏覽器內建的 LocalStorage，搭配 React 的生命週期 Hook useEffect，來實現前端的資料持久化 (Data Persistence)。

Step 1：引入 useEffect 並重構初始狀態
請打開主畫面 src/App.jsx。首先在最上方引入 useEffect。
接著，我們要修改 useState 的初始值。我們不再直接塞入死資料，而是改傳入一個「函數」。這個函數會先去檢查 LocalStorage 裡面有沒有之前存過的紀錄，如果有就載入舊資料；如果沒有，才載入我們的預設假資料。
將 App.jsx 前半段更新為以下程式碼：

Step 2：使用 useEffect 自動儲存資料
現在系統已經會「讀取」了，那我們什麼時候要「儲存」呢？答案是：只要用藥清單發生任何變動，就立刻存檔！
我們可以在 useState 的下方加入一段 useEffect。我們將 medications 放入監聽陣列 (Dependency Array) 中，這樣只要使用者新增、刪除、或確認服藥，React 都會自動觸發這段程式碼，把最新的清單轉成字串存進瀏覽器中。

成果就會如下圖，可以比照之前的截圖，我刪除了一筆資料並把高血壓藥變為已服用