用JS進行Base64編碼、解碼

distant！發表於2020-12-01
JS

從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'

官網用法

相關文章