zqifa的博客

我不管,反正我最萌~

js实现base64编码解码,使用window对象btoa和atob函数

Base64编码解码原理介绍

1.Base64使用A-Z,a-z,0-9,+,/ 这64个字符.
2.编码原理:将3个字节转换成4个字节((3X8)=24=(4X6))先读入3个字节,每读一个字节,左移8位,再右移四次,每次6位,这样就有4个字节了.
3.解码原理:将4个字节转换成3个字节.先读入4个6位(用或运算),每次左移6位,再右移3次,每次8位.这样就还原了.

同时得到base64位加密后的特征:
1.长度是3的倍数
2.只含有65中字符,大写的A至Z,小写的a至z,数字0到9,以及3种符号+/ =,=最多两个,且在末尾。

方法:使用btoa和atob进行Base64的编码和解码

btoa 和 atob 是window对象的两个函数,其中:

1.btoa:是binary to ascii,用于将binary的数据用ascii码表示,即Base64的编码过程。
2.atob:是ascii to binary,用于将ascii码解析成binary数据,即Base64的解码过程。

btoa 和 atob 使用方法:
window.atob(string)/atob(string):解码,用来解码一个已经被base-64编码过的字符串。(参数string: 必需是一个通过 btoa() 方法编码的字符串)。
window.btoa(string)/btoa(string):编码,用来创建一个 base-64编码的字符串。

不过想对Unicode字符编码进行编码,直接使用btoa不行的,需要使用encodeURIComponent和decodeURIComponent方法。因为 btoa 仅支持 ASCII 字符序列,如所以我们要先使用 encodeURIComponent ,将中文字符编码转变成ASCII字符序列

编码时,先用encodeURIComponent对字符串进行编码,再用btoa进行Base64编码;
解码时,先用atob对Base64编码的串进行解码,再用decodeURIComponent对字符串进行解码

注意:
编码的过程:Unicode字符 ——-> 先encodeURI ——-> 再btoa编码
解码的过程:先atob解码 ——-> 再decodeURI ——-> Unicode字符

示例代码:

//编码,输出:"MTIzNDU2"
window.btoa("123456");
//解码,输出:123456
window.atob("MTIzNDU2");

//编码,输出:"5Lit5paH"
btoa(unescape(encodeURIComponent("中文")))
//解码,输出:"中文"
decodeURIComponent(escape(atob("5Lit5paH")))

注意:
1.在使用atob和btoa这两个函数时需要注意的是,IE9是不支持的(虽然现在基本都是面向Chrome浏览器编程)
2.我们使用第三方Base64工具:webtoolkit.base64是一个第三方实现的 Base64 编码工具,完美的支持 unicode 编码的字符串。

作者:zqifa

出处:https://www.l1mn.com

原文地址:https://www.l1mn.com/p/9t6x2.html

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。

公告

昵称:zqifa

站龄: 3年8个月

博客持续完善ing,敬请期待...

打滚求打赏(๑ ̄ ̫  ̄๑)

此处弱弱求打赏~~万一有好心人呢~~

支付宝酱

支付宝赞助

微信酱

微信赞助

随笔分类

php(110)

linux(63)

python(44)

web前端(39)

js(35)

服务器(33)

mysql(30)

html(24)

docker(23)

centos(22)

windows(22)

django(20)

前端设计(18)

git(16)

数据库(14)

算法(14)

常用软件(14)

编程进阶(13)

字符编码(13)

jquery(12)

更多

我的标签

php(106)

linux(47)

python(45)

js(34)

mysql(30)

centos(28)

web前端(23)

windows(22)

docker(22)

django(20)

更多

相册

Copyright © zqifa 联系方式:z___qf@163.com