import { ref, watchEffect } from 'vue'

// 自定义useStorage Hook
export function useStorage(key, defaultValue, storageType = 'local') {
  // 确定使用哪种存储
  const storage = storageType === 'session' ? sessionStorage : localStorage
  
  // 创建响应式数据
  const storedValue = ref(defaultValue)
  
  try {
    // 尝试从存储读取数据
    const item = storage.getItem(key)
    storedValue.value = item ? JSON.parse(item) : defaultValue
  } catch (error) {
    console.error(`读取${key}失败:`, error)
    storedValue.value = defaultValue
  }

  // 监听数据变化并更新存储
  watchEffect(() => {
    try {
      if (storedValue.value === null || storedValue.value === undefined) {
        storage.removeItem(key)
      } else {
        storage.setItem(key, JSON.stringify(storedValue.value))
      }
    } catch (error) {
      console.error(`存储${key}失败:`, error)
    }
  })

  // 提供清除方法
  const clearStorage = () => {
    storage.removeItem(key)
    storedValue.value = defaultValue
  }

  return [storedValue, clearStorage]
}

<template>
  <div>
    <h2>用户偏好设置</h2>
    <label>
      <input type="checkbox" v-model="darkMode"> 
      暗黑模式
    </label>
    
    <div>
      <label>用户名: </label>
      <input v-model="username">
    </div>
    
    <button @click="clearSettings">恢复默认设置</button>
  </div>
</template>

<script setup>
import { useStorage } from './useStorage'

// 使用Hook管理数据
const [darkMode] = useStorage('dark_mode', false)
const [username, clearUsername] = useStorage('user_name', '访客', 'session')
const [fontSize] = useStorage('font_size', 16)

// 清除所有设置
const clearSettings = () => {
  clearUsername()
  darkMode.value = false
  fontSize.value = 16
}
</script>