import { onUnmounted, ref, watch } from 'vue';

/**
 * 自定義 hook 函數(shù)，用于使用 localStorage 或 sessionStorage
 * @param {string} key - 存儲(chǔ)的鍵名
 * @param {*} defaultVal - 默認(rèn)值
 * @param {string} storage - 存儲(chǔ)類型，可選值為 'localStorage' 或 'sessionStorage'
 * @return {object} - 響應(yīng)式對(duì)象，包含 value、setValue 屬性
 */
export function useLocalStorage(key, defaultVal, storage) {
  const storageType = storage === 'localStorage' ? localStorage : sessionStorage;

  // 使用 ref 創(chuàng)建響應(yīng)式對(duì)象
  const value = ref(JSON.parse(storageType.getItem(key)) || defaultVal);

  /**
   * 更新 value 的值，并將新的值存儲(chǔ)到 localStorage 或 sessionStorage 中
   * @param {*} newVal - 新的值
   */
  const setValue = (newVal) => {
    storageType.setItem(key, JSON.stringify(newVal));
    value.value = newVal;
  };

  /**
   * 監(jiān)聽 value 的變化，即時(shí)將 value 的值存儲(chǔ)到 localStorage 或 sessionStorage 中
   */
  const stopWatch = watch(
    () => JSON.stringify(value.value),
    () => {
      storageType.setItem(key, JSON.stringify(value.value));
    },
    { immediate: true }
  );

  // 使用 onUnmounted 鉤子停止監(jiān)聽，防止內(nèi)存泄漏
  onUnmounted(stopWatch);

  /**
   * 清除存儲(chǔ)在 localStorage 或 sessionStorage 中的值
   */
  const clearValue = () => {
    storageType.removeItem(key)
    value.value = defaultVal
  }
  
  return {
    value,
    setValue,
  };
}

<template>
    <el-button type="primary" v-throttle="{ time: 1000, fn: updateStoredValue }">update</el-button>
    <el-button type="primary" v-throttle="{ time: 1000, fn: clearStorage }">clearStorage</el-button>
</template>

<script setup>
  import { useLocalStorage } from 'hooks/index.js'

  //賦值
  const localStorageExample = useLocalStorage(`localStorageExample`, `localStorageExample`, `localStorage`)
  const sessionStorageExample = useLocalStorage(`sessionStorageExample`, `sessionStorageExample`, `sessionStorage`)
  //更新
  const updateStoredValue = () => {
    console.log(`11`)
    localStorageExample.setValue(`localStorageExample改變了`)
    sessionStorageExample.setValue(`sessionStorageExample改變了`)
  }
  //清除
  const clearStorage = () => {
    console.log(`11`)
    localStorageExample.clearValue()
    sessionStorageExample.clearValue()
  }
</script>

<style lang="scss" scoped></style>