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

太过爱你忘了你带给我的痛 2023-09-25 21:49 16阅读 0赞

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

#### 文章目录 ####

*  【前端工具类】001-本地存储工具类：LocalStorageUtil
 *  一、ts 写法
 *  二、vue3 usexxx 写法
 *   *  1、代码
     *  2、使用示例

## 一、ts 写法 ##

/**
     * 本地存储工具类
     */
    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();
      }
    }

## 二、vue3 usexxx 写法 ##

### 1、代码 ###

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};
    }

### 2、使用示例 ###

<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>