昨天我們終於讓網站收藏管理器的功能動起來了！現在已經可以新增網站、刪除收藏，也能透過搜尋欄位快速找到想要的網站。

看起來好像已經是一個能正常使用的小工具了。

不過實際操作一下就會發現一個很尷尬的問題：只要按下 F5 重新整理網頁，剛剛辛苦新增的收藏就全部消失了。

總不能每次打開網站，都要重新把 GitHub、YouTube 這些網址輸入一次吧？

所以今天就來解決這個問題，讓我們的收藏管理器終於有一點「管理器」該有的樣子。

為什麼重新整理後資料會消失？

先回頭看看昨天的 JavaScript。

當時我們使用一個陣列存放收藏資料：

let bookmarks = [];

每次按下新增按鈕，就把資料加入陣列：

bookmarks.push({
    id: crypto.randomUUID(),
    name,
    url,
    category
});

這種方式雖然簡單，但陣列裡的資料只存在於目前執行中的網頁。

一旦重新整理，JavaScript 就會重新執行，bookmarks 自然也會重新變成空陣列。

如果想讓資料保留下來，就需要一個可以儲存資料的地方。

當然，我們可以使用資料庫，但為了這麼小的專案特地架設後端，感覺有點殺雞用牛刀。

所以這次選擇瀏覽器本身提供的 LocalStorage。

讓 Agent 加入 LocalStorage

LocalStorage 是瀏覽器提供的儲存功能，可以將少量資料保存在目前網站所屬的瀏覽器儲存空間中。

即使重新整理網頁，或是關閉後再次開啟，只要資料沒有被清除，通常都還能讀取。

而且不需要安裝套件，也不需要另外建立資料庫，剛好很適合這次的小專案。

這次直接打開昨天的 BookmarkManager，把以下 Prompt 交給 Agent：

請幫目前的 BookmarkManager 專案加入 LocalStorage 資料保存功能。

每次新增或刪除收藏後，都要自動儲存最新的 bookmarks 陣列。重新開啟或整理網頁時，則要從 LocalStorage 讀取之前保存的資料並顯示。

請沿用目前的新增、刪除、搜尋及分類功能，不要修改原本的 UI，也不要加入後端、資料庫或第三方套件。

如果 LocalStorage 裡沒有資料，或是讀取時發生錯誤，請讓網頁仍然能正常顯示空列表。

這次的要求跟前幾天有點不一樣。

我們不是要新增一個看得見的按鈕，而是要讓原本的功能在背後多做一件事：自動保存資料。

看看 AI 修改了哪些程式碼

首先，原本的空陣列要改成從 LocalStorage 讀取資料：

function loadBookmarks() {
    try {
        const saved = localStorage.getItem("bookmarks");
        const data = saved ? JSON.parse(saved) : [];

        return Array.isArray(data) ? data : [];
    } catch (error) {
        console.error("讀取收藏失敗：", error);
        return [];
    }
}

let bookmarks = loadBookmarks();

這裡使用了 localStorage.getItem() 取得之前保存的資料。

不過 LocalStorage 只能儲存字串，所以還需要透過 JSON.parse()，把文字轉回 JavaScript 陣列。

如果沒有找到資料，就先使用空陣列；如果資料格式有問題，也會透過 catch 避免整個網頁直接壞掉。

接著建立一個負責保存資料的函式：

function saveBookmarks() {
    try {
        localStorage.setItem(
            "bookmarks",
            JSON.stringify(bookmarks)
        );
    } catch (error) {
        console.error("儲存收藏失敗：", error);
    }
}

這次則反過來使用 JSON.stringify()，將陣列轉成字串，再透過 localStorage.setItem() 保存。

最後，只需要在原本新增和刪除收藏的地方補上 saveBookmarks()：

function addBookmark() {
    // 取得並驗證使用者輸入
    // 建立新的收藏資料
    ...

    bookmarks.push(newBookmark);

    saveBookmarks();
    renderBookmarks();
}

function deleteBookmark(id) {
    bookmarks = bookmarks.filter(
        bookmark => bookmark.id !== id
    );

    saveBookmarks();
    renderBookmarks();
}

當然，這裡的 ... 只是省略昨天已經寫過的程式碼，實際修改時不需要把原本的新增功能刪掉重寫。

另外，網頁載入時也要呼叫一次 renderBookmarks()，才能把讀取到的收藏重新顯示出來。

這樣就完成最基本的資料保存流程了。

實際測試：F5 之後還在嗎？

接下來就可以打開瀏覽器，重新新增幾筆收藏。

例如：

確認三筆資料都出現在畫面上之後，直接按下 F5。

如果重新整理後，三筆收藏還是好好地待在原本的位置，就代表資料保存功能成功了。

接著也可以刪除 YouTube，再重新整理一次，確認被刪除的收藏不會突然復活。

另外，還可以按下 F12 開啟瀏覽器開發者工具，在 Application → Local Storage 裡查看保存的 bookmarks 資料。

LocalStorage 儲存內容示意

Local Storage

bookmarks

[
  {
    "id": "example-001",
    "name": "GitHub",
    "url": "https://github.com",
    "category": "學習"
  }
]

不過要注意，LocalStorage 並不是雲端資料庫。

它只能在相同的網站來源及瀏覽器儲存環境中使用，不會自動同步到其他裝置。如果使用者清除網站資料，收藏也可能跟著消失。

另外，實際測試時建議透過本機開發伺服器開啟網頁，例如 VS Code 的 Live Server，而不是依賴直接雙擊 HTML 檔案的 file:// 網址，因為不同瀏覽器對本機檔案的 LocalStorage 行為可能不一致。

對我們這次的練習專案來說，LocalStorage 已經很夠用了。

從 Day 24 的靜態畫面，到 Day 25 的新增、刪除、搜尋，再到今天的資料保存，這個小專案終於開始像是一個真正能使用的工具。

不過功能完成不代表程式就完全沒問題。

Day 27，我們就來故意找出幾個問題，讓 AI Debug 自己寫出來的程式。