如何利用浏览器原生支持JS的Base64编码解码
实践出真知,不怕你不会就怕你不下去总结。最近在做项目的时候遇到这样一个前端 HTML 字符信息转 Base64 要求,没有多想的我毫不犹豫的在网上找了一个开源的 base64.js 来满足我的需求,使用很简单,这里我就不说使用过成了,相信大家都会引入使用。
经过使用数据准确,功能良好。当时弄完还洋洋得意,想着今天可以早早的回家了,本以为是个完美的解决。结果,今天发现,我日!原来浏览器很早就支持了 JS Base64 加密解密,而我的做法完全就是放屁脱裤子–多办手续啊!唉!由于技术广度掌握不足,或者说个人的 JS 基础掌握不牢,导致我浪费了大把时间去找 Base64 的 JS 语言库,学习其 API 用法,换来的却是一个冗余而且完全不需要加载的 JS,现在来看,真是个糟糕的技术选型,所以我要改变。
原生 atob 和 btoa 方法
通过查阅资料发现,从 IE10+浏览器开始,所有浏览器就原生提供了 Base64 编码解码方法,不仅可以用于浏览器环境,Service Worker 环境也可以使用。
方法名就是 atob 和 btoa,具体语法如下:
Base64 解码
语法(浏览器中):
var decodedData = window.atob(encodedData);
或者(浏览器或 js Worker 线程中):
var decodedData = self.atob(encodedData);
例如:
window.atob('bXliajEyMw==');// 返回:’mybj123′
完整代码如下:
<head> <meta charset="UTF-8"> <title>Base64 解码</title> <style> p { color: #0e932e; } </style> </head> <body> <p id="result"></p> <script> document.getElementById('result').innerHTML = window.atob && atob('bXliajEyMw=='); </script> </body>
结果如下:
atob 这个方法名称乍一看,很奇怪,不知道这个单词什么意思。我们可以理解为 A to B,也就是从 A 到 B。这里的 B 指的就是 Base64 吗?哈哈哈,恭喜你!猜错了!A 指的才是 Base64,反的,B 才是普通字符,普通意思就是 low,俗称 low B。所以我们这么记忆,Low B,Low B,B 表示很 Low 的普通字符,A 才是 Base64,和首字母对应关系是反的。
因此,atob 表示 Base64 字符 to 普通字符,也就是 Base64 解码。
Base64 编码
语法(浏览器中):
var encodedData = window.btoa(stringToEncode);
或者(浏览器或 js Worker 线程中):
var encodedData = self.btoa(stringToEncode);
例如:
window.btoa('mybj23'); // 返回:'bXliajEyMw=='
完整代码如下:
<head> <meta charset="UTF-8"> <title>Base64 编码</title> <style> p { color: #0e932e; } </style> </head> <body> <p id="result"></p> <script> document.getElementById('result').innerHTML = window.btoa && btoa('mybj123'); </script> </body>
效果如下:
btoa 这个方法名称乍一看,很奇怪,不知道这个单词什么意思。我们可以理解为 B to A,也就是从 B 到 A。那 B 指什么,A 指什么呢?和 atob 方法一样,B 指的是 low B 普通字符串,A 指的是 Base64 字符。
因此,btoa 方法表示 low B 普通字符 to Base64 字符,也就是 Base64 编码。
文章到这儿貌似还没有结束,我在测试的时候发现上面的方法对于字母数字的数据转换没有问题,但如果是中文 Base64 数据转换会有报错问题。
通过查资料我们可以试试下面这样:
btoa(unescape(encodeURIComponent(str)))我用 SVG 代码测试是 OK 的。
网友也提出了解决方法,就是中文先 encode 转码和 decode 编码:
window.btoa(window.encodeURIComponent('嘻嘻哈哈哈哈啦啦啦啦')); window.decodeURIComponent(window.atob('JUU1JTk4JUJCJUU1JTk4JUJCJUU1JTkzJTg4JUU1JTkzJTg4JUU1JTkzJTg4JUU1JTkzJTg4JUU1JTk1JUE2JUU1JTk1JUE2JUU1JTk1JUE2JUU1JTk1JUE2'));
IE8/IE9 的 polyfill
当下,仍有不少 PC 项目还需要兼容 IE9,所以,我们可以专门针对这些浏览器再引入一段 ployfill 脚本或者一个 JS 文件即可。
ployfill JS 脚本戳这里,或者直接右键这里下载源文件!
实际使用,我们可以借助 IE 条件注释无缝对接。
也就是 HTML 中嵌入下面一段代码:
<!--[if IE]> <script src="./base64-polyfill.js"></script> <![endif]-->
[if IE]表示所有 IE 浏览器,由于 IE10+浏览器已经放弃了著名的 IE 条件注释的支持,Chrome 等浏览器本身就不支持这个 IE 私有语法,因此,很天然的,上面一段 script 引入只在 IE9-浏览器下有效。而我们本来就希望只 IE8,IE9 浏览器引入 ployfill,于是正好完美衔接上。
也就是原生支持 atob 和 btoa 方法的浏览器认为就是一段无需关心的 HTML 注释,不支持 atob 和 btoa 的 IE9 及其以下浏览器则会加载我们的 base64-polyfill.js,使浏览器也支持 window.btoa 和 window.atob 这个语法。
完整代码如下:
<head> <meta charset="UTF-8"> <title>Base64 解码/编码</title> <style> p { color: #0e932e; } </style> <!--[if IE]> <script src="js/base64-polyfill.js"></script> <![endif]--> </head> <body> <p id="result1"></p> <p id="result2"></p> <script> result1.innerHTML = atob('bXliajEyMw=='); result2.innerHTML = btoa('mybj123'); </script>
结果显示:
在 Chrome 浏览器下,可以看到没有 polyfill 相关 JS 的加载:
而 IE8 原生不支持 atob 和 btoa 方法的浏览器也正常编码解码 Base64 字符了,如下截图:
以上就是今天关于如何利用浏览器原生支持 JS 的 Base64 编码解码的全部知识,个人学习总结,仅供小伙伴们参考,也许你有更好的方法,欢迎指正。
码云笔记 » 如何利用浏览器原生支持JS的Base64编码解码