Codificando y descodificando Base64 en JavaScript

En JavaScript tenemos dos métodos para codificar y descodificar strings en Base64: atob y btoa.
La forma de trabajar con estos dos métodos es bastante sencilla:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        article {
            width: 20%;
            margin: auto;
            font-size: 12pt;
        }
        .decoding, .encoding {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <article>
        <textarea id="decodeResult" class="decoding" placeholder="Type your plain text here"></textarea>
        <textarea id="encodeResult" class="encoding" placeholder="Type your base64 text here"></textarea>
        <script>
            window.onload = function () {
                decodeResult.addEventListener("input", function () {
                    encodeResult.innerText = window.btoa(decodeResult.value); //encode the string
                });
                encodeResult.addEventListener("input", function () {
                    decodeResult.innerText = window.atob(encodeResult.value); //decode the string
                });
            };
        </script>
    </article>
</body>
</html>

En este ejemplo lo único que tengo son dos elementos de tipo textarea, donde capturo el evento input para ir codificando o descodificando el string que el usuario introduzca.

Normalmente Base64 se utiliza para trasmitir datos, con el objetivo principal de evitar problemas en la comunicación en diferentes escenarios. Sin embargo, como ya se comentó en un post anterior, no es la técnica más óptima debido a que su tamaño es superior que el contenido original, lo que puede suponer peticiones más pesadas.

¡Saludos!