HTML DOM Storage length 속성 완벽 가이드 – 웹 스토리지 항목 개수 확인하기

HTML DOM의 Storage length 속성은 브라우저의 스토리지 객체에 저장되어 있는 항목(item)의 총 개수를 가져오는 데 사용됩니다. 여기서 스토리지 객체는 localStorage 객체 또는 sessionStorage 객체가 될 수 있습니다.

이 속성은 읽기 전용(read-only)이며, 별도의 매개변수 없이 호출하면 해당 스토리지에 현재 저장된 키-값(key-value) 쌍의 개수를 숫자로 반환합니다.

구문(Syntax)

Storage length 속성의 기본 구문은 다음과 같습니다.

localStorage 객체를 사용하는 경우

localStorage.length;

sessionStorage 객체를 사용하는 경우

sessionStorage.length;

예제(Example)

아래 예제는 버튼을 클릭했을 때 localStorage에 저장된 항목의 개수를 화면에 표시해 줍니다.

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center">Storage length 속성 예제</h1>
<p>아래 버튼을 클릭하면 로컬 스토리지 객체에 저장된 항목 수를 확인할 수 있습니다.</p>
<button onclick="itemNum()">개수 확인</button>
<p id="Sample"></p>
<script>
    function itemNum() {
        var num = localStorage.length;
        document.getElementById("Sample").innerHTML = "저장된 스토리지 항목 수는 " + num + "개입니다.";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM Storage length 속성 완벽 가이드 – 웹 스토리지 항목 개수 확인하기

[개수 확인] 버튼을 클릭하면 아래와 같이 스토리지에 저장된 항목의 개수가 출력됩니다.

HTML DOM Storage length 속성 완벽 가이드 – 웹 스토리지 항목 개수 확인하기

정리

length 속성은 localStorage와 sessionStorage 모두에서 동일하게 작동하며, 스토리지에 데이터가 없으면 0을 반환합니다. 반복문과 함께 사용하면 key() 메서드를 통해 저장된 모든 키를 순회할 때 유용하게 활용할 수 있습니다.