HTML 창 btoa() 메서드는 HTML 문서의 atob() 메서드로 디코딩할 수 있는 base-64 문자열로 데이터 문자열을 인코딩합니다.
구문
다음은 구문입니다 -
window.btoa(string_to_be_encoded);
HTML 창 btoa() 메서드의 예를 살펴보겠습니다. -
예시
<!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() Method</h1>
<textarea placeholder="Enter your message here" cols="30" rows="5"></textarea>
<button onclick="encode()" class="btn">Encode Message</button>
<button onclick="decode()" class="btn">Decode Message</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() 메서드를 사용하여 인코딩된 메시지가 표시됩니다.
그런 다음 "Decode Message" 버튼을 클릭하면 atob() 메서드를 사용하여 디코딩된 메시지를 표시합니다.
