HTML에서 localStorage 크기를 확인하는 방법

localStorage는 여러 세션에 걸쳐 정보를 지속적으로 저장하기 위해 사용되는 웹 스토리지 기술입니다. 브라우저를 닫았다가 다시 열어도 데이터가 유지되며, 일반적으로 최대 약 5MB까지 저장할 수 있습니다.

localStorage 크기 확인 예제

아래 코드를 실행하면 localStorage에 저장된 각 항목의 크기와 전체 사용량을 확인할 수 있습니다.

var sum = 0;

// 크기 계산을 위한 반복문
for(var i in localStorage) {
    var amount = (localStorage[i].length * 2) / 1024 / 1024;
    sum += amount;
    document.write( i + " = " + amount.toFixed(2) + " MB");
}
document.write( "Total = " + sum.toFixed(2) + " MB");

코드 설명

이 코드는 for...in 반복문을 사용해 localStorage의 모든 키를 순회하면서 각 항목의 크기를 계산합니다. 문자 하나당 2바이트(UTF-16 기준)로 계산하므로 length * 2를 적용하고, 이를 KB, MB 단위로 변환합니다. 마지막으로 모든 항목의 크기를 더해 총 사용량을 출력합니다.

이 방법을 활용하면 현재 얼마나 많은 저장 공간을 사용 중인지 파악하고, 5MB 한도를 초과하지 않도록 데이터를 관리할 수 있습니다.