現在 AI Recipe 已經能產生食譜，也能根據不同條件進行推薦。

不過，如果使用者看到喜歡的料理，卻沒有辦法保存，下次想再次查看就可能需要重新搜尋。

因此，今天要加入收藏功能。

一、什麼是 LocalStorage？

LocalStorage 是瀏覽器提供的本機儲存功能，可以將一些資料保存在使用者的瀏覽器中。

即使重新整理網頁，資料通常也不會消失。

這次可以使用它來保存收藏的食譜。

二、建立收藏函式

function getFavorites() {
    return JSON.parse(
        localStorage.getItem("favorites") || "[]"
    );
}

function saveFavorite(recipe) {
    const favorites = getFavorites();

    const exists = favorites.some(
        item => item.name === recipe.name
    );

    if (exists) return;

    favorites.push(recipe);

    localStorage.setItem(
        "favorites",
        JSON.stringify(favorites)
    );
}

這裡使用 JSON.stringify() 將資料轉成文字，才能存入 LocalStorage。

三、加入收藏按鈕

在食譜卡片中建立：

const favoriteBtn = document.createElement("button");

favoriteBtn.textContent = "❤️ 收藏食譜";

favoriteBtn.addEventListener("click", function () {
    saveFavorite(recipe);
    favoriteBtn.textContent = "已收藏！";
});

card.appendChild(favoriteBtn);

四、今天的成果

今天完成基本的食譜收藏功能。

使用者可以將喜歡的料理保存到瀏覽器，下次開啟網站時仍能讀取。

不過，LocalStorage 是儲存在目前的瀏覽器，不是雲端帳號資料，因此換裝置或清除瀏覽器資料後，收藏內容可能不會保留。

下一篇要建立收藏清單，讓使用者能查看已保存的料理。