新增localstroage

static/spa.js

@@ -1,6 +1,7 @@
 var pckry;
 document.addEventListener('DOMContentLoaded', (event) => {
     // 初始化函數
+    restoreState();
     init();
 });
 
@@ -224,13 +225,17 @@ function getRandomMemeGif(callback) {
         });
 }
 
-function addImageWithUrl(imageUrl) {
+function addImageWithUrl(imageUrl, sizeClass = null) {
     const card = document.createElement('div');
     card.className = 'card';
+    if (!sizeClass) {
+        sizeClass = 'card-size-' + (Math.floor(Math.random() * 4) + 1);
+    }
+    card.classList.add(sizeClass);
+    
 
     // 隨機選擇一個大小
-    const sizeClass = 'card-size-' + (Math.floor(Math.random() * 4) + 1);
-    card.classList.add(sizeClass);
+
 
     // 創建按鈕容器
     const buttonsContainer = document.createElement('div');
@@ -315,5 +320,26 @@ function addImageWithUrl(imageUrl) {
         // 通知 Packery 新增了卡片並重新布局
         pckry.appended(card);
         pckry.layout();
+        // 更新localStorage的狀態
+        saveState();
     };
+}
+
+
+function saveState() {
+    const cards = document.querySelectorAll('.card');
+    const state = Array.from(cards).map(card => ({
+        url: card.querySelector('img').src,
+        sizeClass: card.classList[1] // 假設大小類別為第二個class
+    }));
+    localStorage.setItem('cardsState', JSON.stringify(state));
+}
+
+function restoreState() {
+    const state = JSON.parse(localStorage.getItem('cardsState'));
+    if (state) {
+        state.forEach(cardState => {
+            addImageWithUrl(cardState.url, cardState.sizeClass);
+        });
+    }
 }