好的今天繼續完善我們的小專案
各位應該有發現當我們重新整理頁面或是關掉重開後，原本寫好的任務或計劃都不見了
因為原本的陣列或變數都是存在記憶體(memory)中，只要我們刷新或重新啟動，記憶體裡的資料就會消失。
如何在下次打開瀏覽器時還能看到原本設定好的任務和專案，這裡提供一個較簡易的方法
利用LocalStorage，讓瀏覽器幫我們保存資料，較方便快速且簡單，不過有幾點要注意

1.僅限單一裝置，單一瀏覽器，不同裝置看不到彼此的資料，意思就是如果你今天換了一台電腦操作，不會有原本儲存的資料
2.能存的資料容量較低，通常5MB左右
3.使用者端可直接看到內容，容易被竄改，安全性低

總結來說就是，如果只是當個人記事本，放個代辦事項或購物清單等，還是可以選擇用LocalStorage來存資料，但如果涉及到個資，帳號密碼等較重要資訊，還是乖乖建個後端資料庫存放較安全，而且後端資料庫能跨裝置同步，更方便也更安全。

我本身沒試過LocalStorage，想說來試玩看看，所以...這裡就讓我偷懶先用LocalStorage，如果後期有需要的話再改成用後端來存資料。

接著來實作如何用LocalStorage
先到App.vue
在<script setup>區域
import watch

import { ref, computed, watch } from 'vue'

添加這兩段

// === 讀取 LocalStorage ===
const savedTasks = localStorage.getItem("tasks")
if (savedTasks) {
  tasks.value = JSON.parse(savedTasks)
}

// === 監聽 tasks 變化並存入 LocalStorage ===
watch(tasks, (newVal) => {
  localStorage.setItem("tasks", JSON.stringify(newVal))
}, { deep: true })

App.vue的<script setup>區域目前完整程式碼是這樣

<script setup>
import { ref, computed, watch } from 'vue'
import ProjectTracker from "./components/ProjectTracker.vue"

  // 儲存代辦事項
const newTask = ref('')
const tasks = ref([])

// === 讀取 LocalStorage ===
const savedTasks = localStorage.getItem("tasks")
if (savedTasks) {
  tasks.value = JSON.parse(savedTasks)
}

// === 監聽 tasks 變化並存入 LocalStorage ===
watch(tasks, (newVal) => {
  localStorage.setItem("tasks", JSON.stringify(newVal))
}, { deep: true })


// 新增代辦事項
function addTask() {
  if (newTask.value.trim() !== '') {
    tasks.value.push({ text: newTask.value, done: false })
    newTask.value = ''
  }
}
// 切換完成狀態
function toggleTask(index) {
  tasks.value[index].done = !tasks.value[index].done
}

// 刪除代辦事項
function deleteTask(index) {
  tasks.value.splice(index, 1)
}

//=== 計數功能 (自動更新) ===
const totalCount = computed(() => tasks.value.length)
const doneCount = computed(() => tasks.value.filter(t => t.done).length)


// === 日期標題 ===
const todayTitle = computed(() => {
  const today = new Date()
  const month = today.getMonth() + 1
  const date = today.getDate()
  const weekdays = ['日', '一', '二', '三', '四', '五', '六']
  const weekday = weekdays[today.getDay()]
  return `${month}/${date} (${weekday}) 代辦事項清單`
})
</script>

再到ProjectTracker.vue修改<script setup>區域
一樣import watch，再添加這兩段程式

// === 讀取 LocalStorage ===
const savedTasks = localStorage.getItem("tasks")
if (savedTasks) {
  tasks.value = JSON.parse(savedTasks)
}


// === 監聽 tasks 變化並存入 LocalStorage ===
watch(tasks, (newVal) => {
  localStorage.setItem("tasks", JSON.stringify(newVal))
}, { deep: true })

目前ProjectTracker.vue的<script setup>區域完整的程式碼是下方這樣
<script setup>
import { ref, computed, watch } from 'vue'
import ProjectTracker from "./components/ProjectTracker.vue"

  // 儲存代辦事項
const newTask = ref('')
const tasks = ref([])

// === 讀取 LocalStorage ===
const savedTasks = localStorage.getItem("tasks")
if (savedTasks) {
  tasks.value = JSON.parse(savedTasks)
}

// === 監聽 tasks 變化並存入 LocalStorage ===
watch(tasks, (newVal) => {
  localStorage.setItem("tasks", JSON.stringify(newVal))
}, { deep: true })

// 新增代辦事項
function addTask() {
  if (newTask.value.trim() !== '') {
    tasks.value.push({ text: newTask.value, done: false })
    newTask.value = ''
  }
}
// 切換完成狀態
function toggleTask(index) {
  tasks.value[index].done = !tasks.value[index].done
}

// 刪除代辦事項
function deleteTask(index) {
  tasks.value.splice(index, 1)
}

//=== 計數功能 (自動更新) ===
const totalCount = computed(() => tasks.value.length)
const doneCount = computed(() => tasks.value.filter(t => t.done).length)

// === 日期標題 ===
const todayTitle = computed(() => {
  const today = new Date()
  const month = today.getMonth() + 1
  const date = today.getDate()
  const weekdays = ['日', '一', '二', '三', '四', '五', '六']
  const weekday = weekdays[today.getDay()]
  return `${month}/${date} (${weekday}) 代辦事項清單`
})
</script>

這樣各位新增好代辦事項或任務後，再重新載入畫面，資料就不會突然消失了
這是我目前的畫面

我有改了配色跟一點排版，有人有興趣會再放設定上來

明天來看如果沒有刪除LocalStorage會有甚麼影響
還有該如何手動刪除LocalStorage
(可能有人想說才裝好資料又刪，但畢竟我跟LocalStorage不熟真不清楚會有什麼影響，嗯對我又菜又愛玩)

好的各位明天見~