HTML의 window.btoa() 메서드는 데이터 문자열을 Base-64 형식으로 인코딩합니다. 이렇게 인코딩된 문자열은 HTML 문서에서 atob() 메서드를 사용하여 다시 원래대로 디코딩할 수 있습니다.
구문
기본 구문은 다음과 같습니다 −
window.btoa(인코딩할_문자열);
그럼 HTML window btoa() 메서드의 실제 활용 예제를 살펴보겠습니다 −
예제
아래 예제에서는 텍스트 영역에 입력한 메시지를 btoa() 메서드로 인코딩하고, atob() 메서드로 다시 디코딩하는 과정을 보여줍니다.
<!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: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
::placeholder {
color: #000;
}
</style>
<body>
<h1>HTML Window atob()/btoa() 메서드</h1>
<textarea placeholder="여기에 메시지를 입력하세요" cols="30" rows="5"></textarea>
<button onclick="encode()" class="btn">메시지 인코딩</button>
<button onclick="decode()" class="btn">메시지 디코딩</button>
<div class="show"></div>
<script>
var show = document.querySelector(".show");
function encode() {
var encMsg = window.btoa(document.querySelector("textarea").value);
show.innerHTML = encMsg;
}
function decode() {
var decMsg = window.atob(window.btoa(document.querySelector("textarea").value));
show.innerHTML = decMsg;
}
</script>
</body>
</html>실행 결과
흰색 텍스트 영역에 메시지를 입력한 뒤 “메시지 인코딩” 버튼을 클릭하면, btoa() 메서드에 의해 인코딩된 메시지가 화면에 표시됩니다.
이어서 “메시지 디코딩” 버튼을 클릭하면, atob() 메서드에 의해 디코딩된 원래 메시지가 표시됩니다.
참고 사항
btoa()와 atob()는 각각 Binary to ASCII, ASCII to Binary를 의미하며, 주로 문자열을 안전하게 전송하거나 저장하기 위해 Base64 인코딩이 필요한 경우에 사용됩니다. 단, 한글 등 유니코드 문자를 직접 인코딩할 수 없으므로, 이러한 문자는 별도의 변환 처리가 필요합니다.