HTML DOM의 Storage key() 메서드는 웹 스토리지 객체 내에서 특정 인덱스 위치에 저장된 키(key)의 이름을 반환하는 기능을 합니다. 이때 인덱스는 key() 메서드의 매개변수로 전달되며, 대상 스토리지 객체는 sessionStorage 또는 localStorage 어느 쪽이든 사용할 수 있습니다.
문법(Syntax)
Storage key() 메서드의 기본 문법은 다음과 같습니다.
localStorage를 사용하는 경우
localStorage.key(index);
sessionStorage를 사용하는 경우
sessionStorage.key(index);
여기서 index는 정수(integer) 타입으로, 이름을 가져오고자 하는 키의 순번을 의미합니다. 인덱스는 0부터 시작한다는 점에 유의하세요. 즉, 첫 번째 키는 index 0, 두 번째 키는 index 1에 해당합니다.
예제(Example)
아래 예제를 통해 Storage key() 메서드가 실제로 어떻게 동작하는지 확인해 보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center">storage key() method example</h1>
<p>Get the first object key name by clicking on the below button</p>
<button onclick="keyName()">GET NAME</button>
<p id="Sample"></p>
<script>
function keyName() {
var k = localStorage.key(1);
document.getElementById("Sample").innerHTML ="The key name of the second localStorage object is "+k;
}
</script>
</body>
</html>위 코드는 버튼을 클릭하면 keyName() 함수가 실행되어, localStorage의 인덱스 1(두 번째 키)에 해당하는 키 이름을 가져와 화면에 출력하는 구조입니다.
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
여기서 GET NAME 버튼을 클릭하면 아래와 같이 결과가 표시됩니다.
정리
Storage key() 메서드는 저장된 데이터의 키 목록을 순회하거나 특정 위치의 키를 확인할 때 유용하게 활용됩니다. localStorage.length 속성과 함께 사용하면 스토리지에 저장된 모든 키-값 쌍을 반복문으로 손쉽게 조회할 수 있습니다.