[ Vue ] Index DB 용량 가져오기

데이터를 indexDB에 저장을 하다보니 indexDB의 용량정보를 가져와 화면에 보여줘서 좀 더 용량 관리를 수월하게 할 수 있도록 처리

 

---

Estimate

우선 indexDB의 용량 정보를 가져오는건 estimate()를 활용하면 가져올 수 있다.

estimate()는 현재 해당 브라우저에 대해서 할당되어있는 총 스토리지 용량과 사용량을 가져올 수 있다.

navigator.storage.estimate()

 

사용 공간에서는 indexDB 뿐만 아니라 Cache, Local Storage, Session Storage등이 다 포함되어있으므로,

상황에 따라서 useageDetails를 활용하여 특정 스토리지 정보를 가져올 수 있다.

 

indexDB의 사용 용량만 가져온다면 useageDetails.indexDB로 indexDB의 사용 용량만 가져올 수 있다.

if (quota.usageDetails?.indexedDB !== undefined) {
	console.log('IndexedDB 사용 공간 (Bytes):', quota.usageDetails.indexedDB);
}

 

그럼 이제 스토리지 용량을 가져오는 함수를 estimate를 활용하여 구현

해당 함수를 호출하면 총 용량과 사용량, 이용가능 용량을 가져와 변수에 저장한다.

이때 함수 호출 기준은 최초 1번 실행 후 이후 indexDB의 정보가 바뀔때마다 호출하는 방식으로 하면 계속해서 업데이트가 가능하다.

storageManager.ts

const totalStorage = ref(0)
const usedStorage = ref(0)
const availableStorage = ref(0)

export async function getIndexedDBStorageInfo(): Promise<void> {
    if ('storage' in navigator && 'estimate' in navigator.storage) {
        try {
            const quota: StorageEstimate = await navigator.storage.estimate()
            const totalSpace: number = quota.quota ??  0
            const usedSpace: number = quota.usage ?? 0

            totalStorage.value = totalSpace
            usedStorage.value = usedSpace
            availableStorage.value = totalSpace - usedSpace

        } catch (error: unknown) {
            if (error instanceof Error) {
                console.error('Error estimating storage space:', error.message);
            } else {
                console.error('Unknown error estimating storage space:', error);
            }
        }
    } else {
        console.warn('Browser does not support navigator.storage.estimate().');
    }
}

 

이때 estimate를 사용해서 정보를 가져올때는 tsconfig.js에서 해당 설정을 추가해야주어야한다.

"lib": [
    "esnext",         // 최신 ECMAScript 기능을 위한 설정
    "dom",            // 웹 브라우저 DOM API를 위한 설정 (⭐필수⭐)
    "dom.iterable"    // DOM의 반복 가능한 객체를 위한 설정
  ],

---

Unit Conversion

기본적으로 용량 정보는 byte로 가져오기 때문에 실제 화면에 보여줄때는 단위 변환을 시켜서 보여주어야한다.

이를 위해 단위변환 formatter를 만들어서 사용했다.

https://yumedev.tistory.com/73

[ Utils ] Unit Conversion

이제 사용하는 곳에서 getStorage()를 호출하여 용량 정보를 다 가져올 수 있도록 하며, 단위변환 함수를 활용하여 변환된 단위로 용량을 가져온다.

export function getStorage() {
    console.log('총 용량',totalStorage.value)
    console.log('사용량',usedStorage.value)
    console.log('이용가능 용량', availableStorage.value)
    return {
        totalStoarge : formatBytes(totalStorage.value),
        usedStorage : formatBytes(usedStorage.value),
        availableStorage: formatBytes(availableStorage.value)
    }
}

 

formatBytes값과 실제 byte의 값은 이렇게 나온다.

이때 사용량은 3645 byte라서 너무 작은 용량이라 화면에는 0.00MB로 나온다.