昨天把收藏頁的呈現方式整理好，也確定用 MEME 和 CHALLENGE 兩個分類來顯示不同類型的卡片。
不過做到這裡，抽卡和收藏其實還是兩套分開的功能。

抽卡的時候，網站知道我現在抽到了哪一張卡，但只要重新整理，這次抽到的結果就不會留下來。
收藏頁雖然也已經做好了，裡面卻還沒有真正屬於使用者的收藏。
所以今天的目標，就是把這兩邊接起來：

抽到一張卡 → 記錄下來 → 收藏頁顯示這張卡

先讓網站記得「我抽過哪張卡」

原本抽卡完成後的流程比較像：

抽出 card-34
↓
顯示 card-34
↓
進度歸 0%

卡片可以正常抽出來，但這次抽到了什麼並不會成為一筆收藏紀錄。
所以今天先新增 collectedCards，利用 localStorage 儲存使用者曾經抽過的卡片 ID。

而這段收藏紀錄放在原本抽卡的 cardImage.onload 裡。
也就是卡片圖片確定成功載入之後，才會把這張卡記錄進收藏。
其中主要新增的收藏判斷是：

const collectedCards = JSON.parse(localStorage.getItem('collectedCards') || '[]');

if (!collectedCards.includes(card.id)) {
    collectedCards.push(card.id);
    localStorage.setItem('collectedCards', JSON.stringify(collectedCards));
}

先從 localStorage 讀取原本的收藏，如果這張卡還不存在，才把新的 card.id 加進去並重新儲存。

流程變成： 抽到卡片 → 圖片成功載入 → 記錄 card ID → 顯示卡片

抽卡本身還是可以重複抽到同一張，但如果 card-34 已經存在於 collectedCards，收藏就不會再重複記錄。
重新整理頁面之後，["card-34"] 也還是保留著。

接下來要讓收藏頁看得到

有了 collectedCards 之後，下一步就是讓 collection.js 讀取這些資料。
目前收藏頁會依照卡片 ID 判斷它屬於哪一種類型：

card-34
↓
取得編號 34
↓
判斷為 challenge
↓
找到 image/cards/34.png
↓
顯示在 CHALLENGE

程式會從 card ID 取得編號，再利用目前的編號規則決定卡片分類：

type: num <= 14 ? 'meme' : 'challenge',
image: 'image/cards/' + num + '.png'

重新進入收藏頁之後，原本顯示：

還沒有收藏任何生活挑戰卡

的空白狀態就會消失，換成真正抽到的 card-34。
而目前還沒有收藏任何卡片的 MEME，則繼續保留原本的空白提示。
到這裡，前面分開做的兩個功能終於真正的接在一起：

抽卡 → 記錄 → 收藏頁讀取 → 分類 → 顯示

抽到的卡有了自己的位置

D21 的時候，先把收藏頁建立出來。
D22 決定 MEME／CHALLENGE 的分類和卡片呈現方式。
D23 則是把前面的抽卡功能終於真的和收藏頁接在一起。

現在抽到的卡不只會出現在抽卡當下，而是真的有了一個之後還能再回來查看的位置。