LocalStorage 패키지별 관리

로컬스토리지 막쓰게되면 나중에 관리하기 힘들어진다. 요새 바빠서 관리 못하다가 만들어 둔거 정리해둔다.

 

소스

• Utils.tsx

export default class Utils {
  ...

  /**
   * LocalStorageManager 클래스
   * baseKey를 기반으로 localStorage를 관리하는 클래스
   */
  static LocalStorageManager = class {
    #baseKey: string;
    #data: Record<string, any>;

    /**
     * LocalStorageManager 생성자
     * @param baseKey 기본 키 (네임스페이스)
     */
    constructor(baseKey: string) {
      this.#baseKey = baseKey;
      this.#data = this.#loadData();
    }

    /**
     * localStorage에서 데이터 로드
     * @returns 로드된 데이터 객체
     */
    #loadData(): Record<string, any> {
      try {
        const storedData = localStorage.getItem(this.#baseKey);
        return storedData ? JSON.parse(storedData) : {};
      } catch (e) {
        console.error(`LocalStorageManager: 데이터 로드 중 오류 발생 - ${e}`);
        return {};
      }
    }

    /**
     * localStorage에 데이터 저장
     */
    #saveData(): void {
      try {
        localStorage.setItem(this.#baseKey, JSON.stringify(this.#data));
      } catch (e) {
        console.error(`LocalStorageManager: 데이터 저장 중 오류 발생 - ${e}`);
      }
    }

    /**
     * 값 설정
     * @param key 키
     * @param value 값
     */
    set(key: string, value: any): void {
      this.#data[key] = value;
      this.#saveData();
    }

    /**
     * 값 가져오기
     * @param key 키
     * @param defaultValue 기본값 (선택사항)
     * @returns 저장된 값 또는 기본값
     */
    get(key: string, defaultValue: any = null): any {
      return this.#data.hasOwnProperty(key) ? this.#data[key] : defaultValue;
    }

    /**
     * 특정 키 삭제
     * @param key 삭제할 키
     */
    remove(key: string): void {
      if (this.#data.hasOwnProperty(key)) {
        delete this.#data[key];
        this.#saveData();
      }
    }

    /**
     * 모든 데이터 삭제
     */
    clear(): void {
      this.#data = {};
      this.#saveData();
    }

    /**
     * 모든 데이터 가져오기
     * @returns 전체 데이터 객체
     */
    getAll(): Record<string, any> {
      return { ...this.#data };
    }

    /**
     * 키가 존재하는지 확인
     * @param key 확인할 키
     * @returns 존재 여부
     */
    has(key: string): boolean {
      return this.#data.hasOwnProperty(key);
    }
  };

  /**
   * LocalStorageManager 인스턴스 생성
   * @param baseKey 기본 키 (네임스페이스)
   * @returns LocalStorageManager 인스턴스
   */
  static createLocalStorage(baseKey: string) {
    return new Utils.LocalStorageManager(baseKey);
  }
}

 

• 사용법

// 알림 관련 로컬 스토리지 관리자
const alertLocalStorage = Utils.createLocalStorage('nf-alert-storage');

alertLocalStorage.get(localStorageKey);
alertLocalStorage.set(localStorageKey, true);
alertLocalStorage.remove(localStorageKey, true);
alertLocalStorage.clear();
alertLocalStorage.getAll();
alertLocalStorage.has();

 

사용

Browser -> Application -> LocalStorage