Base64 簡單實用方法
一、引入Base64方法
使用很簡單,瀏覽器引入該JS文件,然后Base64編碼這樣:
Base64.encode('zhangxinxu');
// 返回:'emhhbmd4aW54dQ=='
解碼就調用decode方法,如下:
Base64.decode('emhhbmd4aW54dQ==');
// 返回:'zhangxinxu'
數據准確,功能良好。當時弄完還洋洋得意,以為是個完美的解決。
結果,今天發現,尼瑪原來瀏覽器很早就支持了JS Base64加密解密,而上面這種洋洋得意的做法完全就是瞎子點燈——白費蠟!根本就不是一個好的技術選型。
由於技術廣度掌握不足,或者說JS基礎掌握不牢,導致浪費了大把時間去找Base64的JS語言庫,學習其API用法,換來一個冗余完全不需要加載的JS,現在來看,真是個糟糕的技術選型。
二、原生atob和btoa方法
實際上,從IE10+瀏覽器開始,所有瀏覽器就原生提供了Base64編碼解碼方法,不僅可以用於瀏覽器環境,Service Worker環境也可以使用。
方法名就是atob和btoa,具體語法如下:
1. Base64解碼
語法為(瀏覽器中):
var decodedData = window.atob(encodedData);
或者(瀏覽器或js Worker線程中):
var decodedData = self.atob(encodedData);
例如:
window.atob('emhhbmd4aW54dQ==');
// 返回:'zhangxinxu'
結果如下圖:
記住atob
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解碼。
2. Base64編碼
語法為(瀏覽器中):
var encodedData = window.btoa(stringToEncode);
或者(瀏覽器或js Worker線程中):
var encodedData = self.btoa(stringToEncode);
例如:
window.btoa('zhangxinxu');
// 返回:'emhhbmd4aW54dQ=='
結果如下圖:
記住btoa方法
btoa這個方法名稱乍一看,很奇怪,不知道這個單詞什么意思。我們可以理解為 B to A,也就是從B到A。那B指什么,A指什么呢?和atob方法一樣,B指的是low B普通字符串,A指的是Base64字符。
因此,btoa方法表示low B普通字符to Base64字符,也就是Base64編碼。
補充於2018-08-09
有人提到中文Base64數據轉換會有報錯問題。
霧霜月同學提出了解決方法,就是中文先encode轉碼和decode編碼:
window.btoa(window.encodeURIComponent('嘻嘻哈哈哈哈啦啦啦啦'));
window.decodeURIComponent(window.atob('JUU1JTk4JUJCJUU1JTk4JUJCJUU1JTkzJTg4JUU1JTkzJTg4JUU1JTkzJTg4JUU1JTkzJTg4JUU1JTk1JUE2JUU1JTk1JUE2JUU1JTk1JUE2JUU1JTk1JUE2'));
