Vue自定义Hook实现简化本地存储

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

/**
 * 自定义 hook 函数，用于使用 localStorage 或 sessionStorage
 * @param {string} key - 存储的键名
 * @param {*} defaultVal - 默认值
 * @param {string} storage - 存储类型，可选值为 'localStorage' 或 'sessionStorage'
 * @return {object} - 响应式对象，包含 value、setValue 属性
 */
export function useLocalStorage(key, defaultVal, storage) {
  const storageType = storage === 'localStorage' ? localStorage : sessionStorage;

  // 使用 ref 创建响应式对象
  const value = ref(JSON.parse(storageType.getItem(key)) || defaultVal);

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

  /**
   * 监听 value 的变化，即时将 value 的值存储到 localStorage 或 sessionStorage 中
   */
  const stopWatch = watch(
    () => JSON.stringify(value.value),
    () => {
      storageType.setItem(key, JSON.stringify(value.value));
    },
    { immediate: true }
  );

  // 使用 onUnmounted 钩子停止监听，防止内存泄漏
  onUnmounted(stopWatch);

  /**
   * 清除存储在 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>