Javascript中Base64编码解码的使用实例-优快云博客

本文介绍如何使用JavaScript内置的window.btoa()和window.atob()函数进行Base64编码和解码，并提供了实际操作的示例代码。

Javascript为我们提供了一个简单的方法来实现字符串的Base64编码和解码，分别是window.btoa()函数和window.atob()函数。

1   var encodedStr = window.btoa(“Hello world”); //字符串编码
2   var decodedStr = window.atob(encodedStr); //字符串解码

看下面的实例代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Javascript中Base64编码解码的使用实例 :: http://www.uncletoo.com</title>
 5         <style>
 6             #result{
 7                 height: 200px;
 8                 width: 500px;
 9                 overflow-y: auto;
10                 border: #ccc dotted 1px;             
11             }
12         </style>
13     </head>
14     <body>
15 结果:
16         <div id="result"> </div>
17         <table>
18             <tr><td>输入要编码的字符串: </td><td><input type='text' id='estr' value=''></td><td> <button onclick="encodeStr()">编码</button></td></tr>
19         <tr><td>输入要解码的字符串: </td><td><textarea id="dstr"></textarea></td><td> <button onclick="decodeStr()">解码</button></td></tr>
20 </table>
21         <script>
22             function encodeStr()
23             { // 字符串编码
24                 var str_val = document.getElementById("estr").value;
25                 if (str_val === '')
26                 {
27                     alert("Please Enter string to encode");
28                 } else {
29                     var enc = window.btoa(str_val);
30                     document.getElementById("result").innerHTML = enc;
31                 }
32             }
33             function decodeStr()
34             { // 字符串解码
35                 var str_val = document.getElementById("dstr").value;
36                 if (str_val === '')
37                 {
38                     alert("Please Enter string to Decode");
39                 } else {
40                     var dec = window.atob(str_val);
41                     document.getElementById("result").innerHTML = dec;
42                 }
43             }
44         </script>
45     </body>
46 </html>