用JS進行Base64編碼、解碼

distant!發表於2020-12-01

從IE10+瀏覽器開始,所有瀏覽器就原生提供了Base64編碼、解碼方法,不僅可以用於瀏覽器環境,Service Worker環境也可以使用。
方法名就是 atob 和 btoa ,具體語法如下:

window.btoa('china is so nb') // 編碼
"Y2hpbmEgaXMgc28gbmI="
window.atob("Y2hpbmEgaXMgc28gbmI=") // 解碼
"china is so nb"

IE8/IE9的polyfill
  當下,仍有不少PC專案還需要相容IE9,所以,我們可以專門針對這些瀏覽器再引入一段ployfill指令碼或者一個JS檔案即可。

<!--[if IE]>
<script src="https://www.zhangxinxu.com/wordpress/2018/08/js-base64-atob-btoa-encode-decode/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 這個語法。

開源的base64.js ,使用很簡單,瀏覽器引入該JS檔案,然後Base64編碼這樣

Base64.encode('china is so nb'); // 編碼
"Y2hpbmEgaXMgc28gbmI="
Base64.decode("Y2hpbmEgaXMgc28gbmI="); // 解碼
'china is so nb'

官網用法

相關文章