昨天完成多帳本後，我已經能把聚餐和旅行分開記，也能修改成員姓名而不影響支出關聯。不過，當時的資料只存在頁面記憶體中，一旦重新整理，帳目就回到範例。今天要處理的，就是讓已經記好的資料能在下一次開啟時恢復，讓專案往日常可用的工具再前進一步。

這次我請 AI 完成第十七天的功能與文章，並把結果記錄到 Notion。我也希望能看見目前專案的進度，因此除了保存功能，畫面會延續前一次調整的奶油白、鼠尾草綠、小笑臉與三步驟引導，並把原本「暫存於此頁」的提示改成實際的保存狀態。

這一版先使用瀏覽器的 localStorage。保存內容包含全部帳本、每本帳的成員與支出，以及目前選取的帳本 ID。資料外層加上 version: 1，讓之後修改格式時能辨認版本。今天沒有建立資料庫或登入系統，也沒有跨裝置同步；保存的位置仍是目前這個瀏覽器、目前這個網站來源。

我把保存與讀取整理在 storage.js，讓畫面不用自行處理 JSON 格式和例外狀況。新增、修改、刪除支出，加入或移除成員、修改姓名、建立或修改帳本名稱，以及切換帳本後，都會嘗試保存最新狀態。成功時，畫面會顯示「已存到這個瀏覽器」，而不是只用短暫訊息暗示操作已完成。

重新開啟頁面時，程式先嘗試讀取既有資料。只有在確定沒有保存資料時，才建立初始範例。若讀取成功，會恢復所有帳本和目前選取的帳本，並使用原本的帳本與成員 ID。今天也把新增支出改為使用隨機 UUID，避免重新開啟頁面後，流水號從頭開始而撞到既有支出。

讀取不是只要 JSON 能解析就算成功。我加入了整份資料的檢查，確認帳本數、成員數、支出數在支援範圍內，帳本與成員 ID 沒有重複，付款人與分攤對象確實存在於同一本帳。自訂分攤也會再次經過原本的計算驗證，確認金額與合計正確。全部帳本通過後，才讓這份資料成為目前畫面的狀態。

如果資料損壞，或保存的是目前不認識的版本，不能直接用範例蓋掉原本內容。因此載入失敗時，程式保留原始儲存內容，停止自動保存，並顯示明確提示。畫面可以暫時顯示範例，但這不代表原本帳目已經恢復，也不能把暫用範例的修改當成已保存。本次沒有做資料修復或版本轉換，這些狀況需要另外處理。

保存失敗也必須和記帳成功分開。使用者可能被瀏覽器限制存取，或儲存空間已滿；此時新資料仍留在當前頁面，畫面會提醒尚未保存，並在可重試的情況提供「重試保存」按鈕。程式也在有未保存狀態時登記離頁提醒，但瀏覽器是否顯示提醒取決於環境，因此不能把它當成資料備份。

另外，我加入了寫入前的舊值比對。如果程式發現儲存內容已經和上次讀取的不一樣，就停止保存，避免明知資料已被另一個頁面更新還直接覆蓋。這是基本的衝突偵測，不是跨頁面交易鎖，也不會合併兩邊修改；兩個頁面極接近同時寫入的情況仍不應視為已完整解決。現階段建議同一份帳目以一個頁面操作。

今天用可注入的儲存介面執行二十一項模組測試。正常情境包含首次使用、保存後建立新實例還原、恢復後改名與新增支出；失敗情境包含空間不足、存取被拒、損壞 JSON、未知版本、重複 ID、無效付款人與參與者，以及自訂金額不守恆。測試也確認失敗時原本內容不會被覆蓋，空間限制排除後可以重試。

二十一項保存測試全部通過，另外重跑第十六天的十三項帳本測試，以及第十五天的六種帳目狀態與錯誤加總驗證，結果也通過。JavaScript 語法、Git 差異格式與本機頁面回應檢查正常。不過，這次仍沒有可連線的瀏覽器控制介面，所以尚未實際在畫面上新增支出再按重新整理；模組還原測試與真正的瀏覽器驗收會分開記錄。

現在專案已有多帳本、成員管理、多筆支出、平均與自訂分攤、不同代墊者的淨額結算，以及今天加入的本機保存。畫面也保留較親切的操作引導。仍未完成的項目包含檔案備份與還原、現金面額輸入、付款與找零方案，以及雲端同步。這次程式變更留在本機，沒有提交、推送 Git 或部署到舊網站。

使用本機保存時，需要固定使用相同的網址與瀏覽器。127.0.0.1 與 localhost、不同連接埠，或換一個瀏覽器，都可能是不同的儲存位置；清除網站資料與無痕模式也可能讓帳目無法找回。因此，能重新載入資料之後，下一步仍然需要備份。第十八天會處理 JSON 匯出、匯入驗證與還原，讓帳本除了留在瀏覽器，也能由自己保留一份檔案。