HTML의 navigator.cookieEnabled 속성은 현재 브라우저에서 쿠키(cookie)가 활성화되어 있는지 여부를 확인하여, 그 결과를 불리언(Boolean) 값으로 반환합니다. 쿠키가 허용된 상태라면 true, 차단된 상태라면 false를 리턴합니다.
주요 특징
- 쿠키가 활성화되어 있으면
true, 비활성화되어 있으면false를 반환합니다. - 사용자가 브라우저 설정에서 쿠키를 차단한 경우를 사전에 감지할 수 있습니다.
- 로그인 상태 유지, 장바구니 저장 등 쿠키에 의존하는 기능을 구현하기 전에 호환 여부를 점검하는 용도로 활용됩니다.
문법(Syntax)
사용 문법은 다음과 같습니다.
navigator.cookieEnabled
별도의 매개변수 없이 속성에 바로 접근하며, 읽기 전용(read-only) 값입니다.
예제(Example)
아래는 navigator.cookieEnabled 속성을 실제로 활용한 예제입니다. 버튼을 클릭하면 현재 브라우저의 쿠키 활성화 상태가 화면에 표시됩니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 20px;
width: 330px;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.5rem;
color: #fff;
}
</style>
<body>
<h1>HTML navigator cookieEnabled 속성 데모</h1>
<button class="btn" onclick="display()">브라우저 쿠키 정보 보기</button>
<div class="show"></div>
<script>
function display() {
document.querySelector(".show").innerHTML = "<p>브라우저 쿠키가 활성화되어 있습니까?</p>" + "<p>" + navigator.cookieEnabled + "</p>";
}
</script>
</body>
</html>실행 결과(Output)
페이지에서 “브라우저 쿠키 정보 보기” 버튼을 클릭하면, 해당 브라우저에서 쿠키가 활성화되어 있는지 여부가 아래와 같이 표시됩니다.
정리
navigator.cookieEnabled 속성은 단 한 줄의 코드로 브라우저의 쿠키 지원 여부를 확인할 수 있는 간편한 방법입니다. 쿠키 기반 인증, 사용자 설정 저장 등 웹 서비스를 개발할 때 사용자 환경에 따른 예외 처리를 위해 꼭 활용해 보시기 바랍니다.