2025-01-04 旅行分帳應用程式-步驟06

發表於 2025-04-14 閱讀次數：

2025-01-04 旅行分帳應用程式-步驟06

2025-01-04 旅行分帳應用程式-步驟06

資料「即時儲存到 localStorage」

太好了，我來幫你把資料「即時儲存到 localStorage」的功能整合進你的 Vue 應用程式，這樣就算重新整理畫面，資料也不會消失。

✅ 我們要儲存哪些資料？

成員資料 members
支出資料 expenses
預設的支出項目 defaultExpenseItems

🛠 修改步驟

加入 watch 監聽變化 → 自動存入 localStorage
在 onMounted 時自動從 localStorage 載入資料

✅ 完整整合範例（請加在 `<script setup>` 中）

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

const members = ref([])
const expenses = ref([])
const defaultExpenseItems = ref([])

// 儲存到 localStorage 的方法
function saveToLocalStorage() {
  localStorage.setItem('splitBill_members', JSON.stringify(members.value))
  localStorage.setItem('splitBill_expenses', JSON.stringify(expenses.value))
  localStorage.setItem('splitBill_defaultItems', JSON.stringify(defaultExpenseItems.value))
}

// 載入 localStorage 中的資料
function loadFromLocalStorage() {
  const savedMembers = localStorage.getItem('splitBill_members')
  const savedExpenses = localStorage.getItem('splitBill_expenses')
  const savedItems = localStorage.getItem('splitBill_defaultItems')

  if (savedMembers) members.value = JSON.parse(savedMembers)
  if (savedExpenses) expenses.value = JSON.parse(savedExpenses)
  if (savedItems) defaultExpenseItems.value = JSON.parse(savedItems)
}

// 監聽 members、expenses、defaultExpenseItems 有變動就儲存
watch([members, expenses, defaultExpenseItems], saveToLocalStorage, { deep: true })

// 初始化時載入
onMounted(() => {
  loadFromLocalStorage()
})

📌 注意

watch([...], ..., { deep: true }) 是為了監控陣列或物件裡的變化。
key 名像 splitBill_members 可以依你的 App 名稱自訂，避免不同 app 的 key 衝突。

需要我幫你把這段直接整合到目前的完整程式碼裡嗎？還是你想試試看加進去？👩‍💻

0%