[Ionic] localForage-cordovaSQLiteDriver으로 Native storage 사용하기

최근 Ionic 앱을 개발하면서 데이터를 저장하고자 하는 경우가 많다. 그 중 localForage-cordovaSQLiteDriver를 사용하여 네이티브 스토리지를 활용하는 방법에 대해 알아보겠다.

우선, Ionic 프로젝트에 필요한 패키지를 설치해야 한다. 다음 명령어를 사용하여 설치할 수 있다.

npm install @ionic/storage cordova-sqlite-storage localforage-cordovasqlitedriver

 

그런 다음, useStorage.ts 라는 파일을 만들었다.

import { useEffect, useState } from "react";
import { Storage, Drivers } from "@ionic/storage";
import CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';

export function useStorage() {
  const [storage, setStorage] = useState<Storage>();

  useEffect(() => {
    const initStorage = async () => {
      const newStorage = new Storage({
        name: 'your-storage-name',
        driverOrder: [CordovaSQLiteDriver._driver, Drivers.IndexedDB, Drivers.LocalStorage]
      });
      await newStorage.defineDriver(CordovaSQLiteDriver);
      await newStorage.create();
      setStorage(newStorage);
    }

    initStorage();
  }, []);

  const getData = async (key: string): Promise<any | null> => {
    if (!storage) return null;
    
    try {
      const data = await storage.get(key);
      return data;
    } catch (error) {
      console.error(`Error getting data from storage for key: ${key}`, error);
      return null;
    }
  };

  const setData = async (key: string, data: any): Promise<void> => {
    if (!storage) return;

    try {
      await storage.set(key, data);
    } catch (error) {
      console.error(`Error storing data in storage for key: ${key}`, error);
    }
  };

  return { getData, setData };
}

 

사용하고자 하는 곳에서 불러와서 사용하면 된다.

import { useStorage } from "./hooks/useStorage";

// ...

const { getData, setData } = useStorage();