這次我讓記帳 App 加入 localStorage，讓使用者重新整理或關閉網頁後，之前的記帳資料也能保留下來。
整體的運作方式是：App 開啟時，先從 localStorage 讀取之前儲存的資料，作為 State 的初始值；當記帳資料有新增、刪除或修改時，再透過 useEffect 自動同步更新。
因為 localStorage 只能儲存字串，所以資料在存入時需要先轉成 JSON，讀取時再轉回原本的資料格式。藉此我才加了解 useEffect 的依賴陣列，讓程式只在記帳資料改變時進行儲存，而不是每次畫面重新渲染都重複執行。



其實這幾天我一直被另一個問題困擾，就是輸入新的記帳項目後，總金額有時候不會跟著改變。前幾天就發生過類似的狀況，但一直找不到原因。

直到今天我把瀏覽器的自動翻譯關掉後，才發現問題真的消失了。原來我之前的計算方式會直接抓取畫面上的文字，再從文字中取得金額。當瀏覽器自動翻譯或修改畫面上的文字時，就可能讓原本的計算方式失效。
這也讓我了解到，資料和畫面應該分開處理。金額應該在資料中以數字的形式保存，計算總金額時直接從 State 裡的原始資料進行加總，而不是從畫面上已經顯示出來的文字重新取得數值。
經過今天新增的功能與部分修改，我更了解 React 中資料負責資料、UI 負責呈現的概念。這樣不只能讓計算更穩定，也能避免畫面上的文字或格式變化影響到程式的核心功能。