2025-01-19 JavaScript 系列八：第4課 ── 行事曆應用程式-步驟09

2025-01-19 JavaScript 系列八：第4課 ── 行事曆應用程式-步驟09

詳細解釋 function saveEventToLocalStorage 及 function loadEventsFromLocalStorage()

非常好👍，這兩個 function 是今天的重點之一，
我來用很清楚的方式，幫你逐行慢慢解析：

---

🧠 先看 saveEventToLocalStorage(event)

這個 function 是「儲存一個新的活動到 localStorage」。

function saveEventToLocalStorage(event) {
  const events = JSON.parse(localStorage.getItem(STORAGE_KEY)) || []
  events.push(event)
  localStorage.setItem(STORAGE_KEY, JSON.stringify(events))
}

🔍 每一行解釋：

---

1️⃣

const events = JSON.parse(localStorage.getItem(STORAGE_KEY)) || []

• localStorage.getItem(STORAGE_KEY) ➔
  從 localStorage 抓出之前存的資料（會是一個字串，或是 null）。
• JSON.parse(...) ➔
  把那個字串轉回**陣列 (Array)**，因為 localStorage 裡面只能存字串，存進去前我們會先 stringify，讀出來要 parse。
• || [] ➔
  如果 localStorage 裡面根本沒有資料（例如第一次使用），那就給一個空陣列 []。

✅ 結果：
這行就是：取得目前所有活動資料的陣列。

---

2️⃣

events.push(event)

• 把**新的活動 (event)**，加入剛剛拿到的那個活動陣列 events 裡。

✅ 結果：
活動陣列中多了一筆新的活動！

---

3️⃣

localStorage.setItem(STORAGE_KEY, JSON.stringify(events))

• JSON.stringify(events) ➔
  把整個陣列轉成字串。
• localStorage.setItem(...) ➔
  把這個新的字串，存回 localStorage 裡，覆蓋掉原本的。

✅ 結果：
localStorage 裡的活動資料 ➔ 更新為含有新活動的版本！

---

---

🧠 再看 loadEventsFromLocalStorage()

這個 function 是「從 localStorage 抓出所有活動」。

function loadEventsFromLocalStorage() {
  return JSON.parse(localStorage.getItem(STORAGE_KEY)) || []
}

🔍 解釋：

---

只有一行：

return JSON.parse(localStorage.getItem(STORAGE_KEY)) || []

跟剛剛第一行很像，意思是：

• localStorage.getItem(STORAGE_KEY) ➔
  從 localStorage 抓資料（會是字串）。
• JSON.parse(...) ➔
  把字串轉回活動陣列。
• || [] ➔
  如果抓不到（例如第一次開啟），就回傳空陣列。

✅ 結果：
這個 function 的結果是：
一個活動陣列（可能是空的，也可能是有很多活動的）。

---

🏆【總結】兩個 function 的角色：

function	做什麼？
saveEventToLocalStorage(event)	把新活動加到 localStorage 裡
loadEventsFromLocalStorage()	從 localStorage 載出所有活動，給 FullCalendar 顯示

---

🎯【順便整理一個小流程圖】

新增活動 ➔ saveEventToLocalStorage(event) ➔ 更新 localStorage

開啟網頁 ➔ loadEventsFromLocalStorage() ➔ 把 localStorage 資料顯示到 FullCalendar

---

要不要我也幫你畫成一個超簡單的【流程圖】？👀
如果想要，回我【要流程圖】～我可以用圖片更直覺畫給你！🎨