【前端工具类】001-本地存储工具类：LocalStorageUtil

/**
 * 本地存储工具类
 */
class LocalStorageUtil {

  /**
   * 获取本地存储
   * @param key 键
   * @returns 值
   */
  static get(key: string): any {
    const value = localStorage.getItem(key);
    if (value) {
      return JSON.parse(value);
    }
    return null;
  }

  /**
   * 设置本地存储
   * @param key 键
   * @param value 值
   */
  static set(key: string, value: any): void {
    localStorage.setItem(key, JSON.stringify(value));
  }

  /**
   * 移除本地存储
   * @param key 键
   */
  static remove(key: string): void {
    localStorage.removeItem(key);
  }

  /**
   * 清空本地存储
   */
  static clear(): void {
    localStorage.clear();
  }
}

import {ref} from "vue";

export function useLocalStorage(
    key: string,
    defaultValue: any
) {
    const value = ref(defaultValue);

    // 从本地存储中获取值
    const load = () => {
        const storedValue = localStorage.getItem(key);

        if (storedValue !== null) {
            try {
                value.value = JSON.parse(storedValue);
            } catch (e) {
                console.warn(`Unable to parse stored value for key ${key}:`, e);
            }
        }
    };

    // 保存值到本地存储
    const save = () => {
        try {
            localStorage.setItem(key, JSON.stringify(value.value));
        } catch (e) {
            console.warn(`Unable to store value for key ${key}:`, e);
        }
    };

    // 清除本地存储中的值
    const clear = () => {
        localStorage.removeItem(key);
        value.value = defaultValue;
    };

    // 在组件挂载时从本地存储中加载值
    load();

    // 在组件卸载时将值保存到本地存储
    // 注意：这里不能使用 `onUnmounted` 钩子，因为组件实例被销毁后无法再访问到 `key` 和 `defaultValue`
    window.addEventListener("beforeunload", save);

    return {value, clear};
}

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="clear">清除本地存储</button>
  </div>
</template>

<script>
import { useLocalStorage } from "@/utils/WindowSizeTracker";

export default {
  setup() {
    const { value: count, clear } = useLocalStorage("count", 0);

    const increment = () => {
      count.value += 1;
    };

    return { count, increment, clear };
  },
};
</script>