使用window.btoa和window.atob来进行Base64编码和解码

WindowBase64.atob() 函数用来解码一个已经被base-64编码过的数据。

WindowBase64.btoa() 函数将ascii字符串或二进制数据转换成一个base64编码过的ASCII字符串,该方法不能直接作用于Unicode字符串.

window.atob: a ==> b
window.btoa: b ==> a

你可以使用 window.btoa() 方法来编码一个可能在传输过程中出现问题的数据,并且在接受数据之后,使用 window.atob() 方法来将数据解码。

var encodedData = window.btoa(stringToEncode);

var decodedData = window.atob(encodedData);

例子:

var encodedData = window.btoa("Hello, world"); //编码
console.log(encodedData);//SGVsbG8sIHdvcmxk
var decodedData = window.atob(encodedData); //解码
console.log(decodedData);//Hello, world

备注:

由于一些网络通讯协议的限制,你必须使用该方法对原数据进行编码后,才能进行发送.接收方使用相当于 window.atob 的方法对接受到的base64数据进行解码,得到原数据.
例如, 发送某些含有ASCII码表中0到31之间的控制字符的数据.

Unicode问题

由于 DOMString 是16位编码的字符串，所以如果有字符超出了8位ASCII编码的字符范围时，在大多数的浏览器中对Unicode字符串调用 window.btoa 将会造成一个 Character Out Of Range 的异常。
有2种方法解决这个问题：

第一个是转义整个字符串然后编码这个它;
第二个是把UTF-16的 DOMString 转码为UTF-8的字符数组然后编码它。 [我没测试过]
下面是2个可行的方法。

方法一: 编码之前转义字符串

方法二: 用JavaScript的TypedArray和UTF-8重写DOM的atob()和btoa()

使用像TextEncoding(包含了早期(legacy)的windows,mac, 和 ISO 编码), TextEncoderLite 或者 Buffer 这样的文本编码器增强(polyfill)和Base64增强, 比如base64-js。最简单, 最轻量级的解决方法就是使用 TextEncoderLite 和 base64-js. 测试案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>window.atob() && window.btoa()</title> </head> <body> <input type="text" /> <input type="button" value="btoa编码" /> <input type="button" value="atob解码" /> <div> <label></label> <br/> <label></label> </div> <script type="text/javascript"> /* window.atob() 解码*/ function atobFun() { let strText = document.getElementById(‘lblInfo1‘).innerHTML; let strText2 = document.getElementById(‘lblInfo2‘).innerHTML; console.log(strText + "解码"); let strLen = strText.trim(); if (strLen.length > 0) { let encodedStr = window.atob(strText); document.getElementById(‘lblInfo1‘).innerHTML = encodedStr; let encodedStr2 = b64_to_utf8(strText2); document.getElementById(‘lblInfo2‘).innerHTML = encodedStr2; console.log(encodedStr + "解码"); console.log(encodedStr2 + "解码"); } else { alert(‘请输入字符串‘); } } /* window.btoa() 编码*/ function btoaFun() { let strText = document.getElementById(‘iptText‘).value; let strLen = strText.trim(); if (strLen.length == 0) { alert(‘请输入字符串‘); } else { let decodedStr = window.btoa(strText); document.getElementById(‘lblInfo1‘).innerHTML = decodedStr; let decodedStr2 = utf8_to_b64(strText); document.getElementById(‘lblInfo2‘).innerHTML = decodedStr2; console.log(decodedStr + "编码"); console.log(decodedStr2 + "编码"); } } function utf8_to_b64(str) { //encodeURIComponent()会对它发现的任何非标准字符进行编码。 // unescape && escape 慢慢被废弃，不建议使用。 // return window.btoa(unescape(encodeURIComponent(str))); // return window.btoa(encodeURIComponent(str)); return window.btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) { return String.fromCharCode(‘0x‘ + p1); })); } function b64_to_utf8(str) { //decodeURIComponent() 解析所有的非标准字符 // unescape && escape 慢慢被废弃，，不建议使用。 // return decodeURIComponent(escape(window.atob(str))); return decodeURIComponent(window.atob(str)); } </script> </body> </html>

秒客网

使用window.btoa和window.atob来进行Base64编码和解码

相关文章