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

發表於 更新於 分類於 閱讀次數：
2025-01-23 JavaScript 系列八：第4課 ── 行事曆應用程式-步驟13

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

刪除 localStorage 中事件後，refresh 仍會出現」**的問題。

你整體寫得很好，現在來幫你解決 **「刪除 localStorage 中事件後，refresh 仍會出現」**的問題。

🔍 問題根源

你的 deleteEventFromLocalStorage(info.event) 裡這一行比對失敗：

1
e.start === event.start

原因是 info.event.start 是 Date 物件，而 e.start 是儲存在 localStorage 中的 字串（如：”2025-04-28T09:00”）。

✅ 解法：統一比對格式

請改寫 deleteEventFromLocalStorage 如下，把 event.start 轉成 ISO 格式（toISOString().slice(0, 16)）再比對：

1
2
3
4
5
6
7
8
9
10
11
12
13
function deleteEventFromLocalStorage(event){
  const events = JSON.parse(localStorage.getItem(STORAGE_KEY)) || []

  const eventStartStr = event.start instanceof Date
    ? event.start.toISOString().slice(0, 16) // "YYYY-MM-DDTHH:mm"
    : event.start

  const updateEvents = events.filter(e => {
    return !(e.title === event.title && e.start === eventStartStr)
  })

  localStorage.setItem(STORAGE_KEY, JSON.stringify(updateEvents))
}

✅ 額外建議：加除錯訊息

幫助你開發時能看到刪除是否成功：

1
2
console.log('刪除前事件數：', events.length)
console.log('刪除後事件數：', updateEvents.length)

這樣改完後，應該就能正確刪除事件了。你想要我幫你補一個「修改活動」的功能嗎？