HTML5 로컬 저장소(localStorage)에 특정 키가 존재하는지 확인하는 방법

HTML5 로컬 저장소에서 키 존재 여부 확인하기

웹 개발을 하다 보면 로컬 저장소(localStorage)에 특정 키가 저장되어 있는지 확인해야 하는 경우가 자주 발생합니다. 이럴 때 활용할 수 있는 대표적인 방법은 두 가지가 있으며, 각각의 특징을 이해하고 상황에 맞게 사용하는 것이 좋습니다.

1. getItem() 메서드 사용하기

getItem(key) 메서드는 하나의 매개변수(키)를 받아 해당 키와 연결된 값을 반환합니다. 만약 지정한 키가 저장소에 존재하지 않으면 null을 반환하므로, 이 성질을 활용해 키의 존재 여부를 손쉽게 판단할 수 있습니다.

if(localStorage.getItem("user") === null) {
    // 키가 존재하지 않을 때 실행할 코드
}

위 코드에서 "user"라는 키가 로컬 저장소에 없다면 null이 반환되어 조건문 내부의 코드가 실행됩니다.

2. in 연산자 사용하기

in 연산자를 사용하면 더욱 직관적으로 키의 존재 여부를 확인할 수 있습니다. 아래 예제를 참고하세요.

if("user" in localStorage){
    alert('yes');
} else {
    alert('no');
}

"user" 키가 로컬 저장소에 존재하면 'yes' 알림이, 존재하지 않으면 'no' 알림이 화면에 표시됩니다.

두 방법의 차이점

in 연산자는 저장된 값의 내용과 관계없이 키의 존재 여부만 정확하게 확인할 수 있다는 장점이 있습니다. 반면 getItem()은 키가 실제로 존재하더라도 저장된 값이 null인 경우에는 구분이 어려울 수 있습니다. 따라서 단순히 키의 유무만 확인하고 싶다면 in 연산자를, 키와 함께 저장된 값을 바로 활용해야 한다면 getItem()을 사용하는 것이 효율적입니다.