HTML DOM의 Storage getItem() 메서드는 지정된 키 이름을 전달하여 웹 스토리지(localStorage 또는 sessionStorage)에 저장된 값을 가져오는 데 사용됩니다. 이 메서드는 해당 키에 연결된 값을 반환하며, 지정한 이름의 키가 존재하지 않을 경우 null을 반환합니다.
문법(Syntax)
Storage getItem() 메서드의 기본 문법은 다음과 같습니다.
localStorage.getItem(keyname);
또는
sessionStorage.getItem(keyname);
여기서 keyname은 문자열(string) 타입이며, 가져오려는 항목(item)의 이름을 나타냅니다.
매개변수 및 반환값
- keyname (필수): 값을 조회할 키의 이름을 지정합니다.
- 반환값: 해당 키에 저장된 값을 문자열 형태로 반환하며, 키가 존재하지 않으면 null을 반환합니다.
예제
다음은 HTML DOM Storage getItem() 메서드를 활용한 실제 예제입니다. 아래 코드는 CREATE 버튼을 클릭할 때마다 localStorage에 'visits'라는 이름의 항목을 생성하고, Display 버튼을 클릭하면 getItem() 메서드로 해당 값을 읽어 화면에 출력합니다.
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center">Storage getItem() method example</h1>
<p>Create a localStorage item with the name CLICKS to count the number of clicks on the create button by clicking the below button</p>
<button onclick="createItem()">CREATE</button>
<p>Get the CLICKS item value by clicking the below button</p>
<button onclick="showItem()">Display</button>
<p id="Sample"></p>
<script>
var y=1;
function createItem() {
document.getElementById("Sample").innerHTML="localStorage Item has been created with name CLICKS";
localStorage.visits = y;
y++;
}
function showItem() {
var x = localStorage.getItem("visits");
document.getElementById("Sample").innerHTML = "The total no. of clicks are : "+x;
}
</script>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
CREATE 버튼을 클릭한 경우 −
"Display" 버튼을 클릭한 경우 −
참고 사항
- 웹 스토리지에는 모든 값이 문자열로 저장되므로, 숫자나 객체를 다룰 때는 적절한 형 변환(JSON.stringify, Number 등)이 필요합니다.
- localStorage는 브라우저를 닫아도 데이터가 유지되는 반면, sessionStorage는 브라우저 세션이 종료되면 데이터가 삭제됩니다.
- getItem()과 함께 자주 사용되는 관련 메서드로는 값을 저장하는 setItem(), 특정 항목을 삭제하는 removeItem(), 스토리지 전체를 비우는 clear() 등이 있습니다.