Window 中的自带方法Base64

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'));