大发六合彩

大发六合彩提示:你现在浏览的网站是镜像网站

请访问原网站:1079wrnb.com
声明:大发六合彩唯一指定网址为:mybj123 .com,其他网址均为冒充,望周知!!!前端技术交流群:565733884

如何利用浏览器原生支持JS的Base64编码解码

大发六合彩前端技术 码云 76℃ 0评论
目录
[隐藏]

实践出真知,不怕你不会就怕你不下去总结。最近在做项目的时候遇到这样一个前端HTML字符信息转Base64要求,没大发六合彩有多想的我毫不犹豫的在网上找了一个开源的base64.js来满足我的需求,使用很简单,这里我就不说使用过成了,相信大家都会引入使用。

经过使用数据准确,功能良好。当时弄完还洋洋得意,想着今天可以早早的回家了,本以为是个完美的解决。结果,今天发现,我日!原来浏览器很早就支持了JS Base64加密解密,而我的做法完全就是放屁脱裤子–多办手续啊!唉!由于技术广度掌握不足,或者说个人的JS基础掌握不牢,导致我浪费了大把时间去找Base64的JS语言库,学习其API用法,换来的却是一个冗余而且完全不需要加载的JS,现在来看,真是个糟糕的技术选型,所以我要改变。

原生atob和btoa方法

通过查阅资料发现,从IE10+浏览器开始,所有浏览器就原生提供了Base64编码解码方法,不仅可以用于浏览器环境,Service Worker环境也可以使用。

方法名就是atob和btoa,具体语法如下:

Base64解码

语法(浏览器中):

var decod大发六合彩edData = window.atob(encodedData);

或者(浏览器或js Worker线程中):

var decodedData = self.atob(encodedData);

例如:

window.atob(大发六合彩'bXliajEyMw==');
// 返回:'mybj123'

完整大发六合彩代码如下:

<head>
    <meta charset="UTF-8">
    <title>Base64解码</title>
    <style>
        p { color: #0e932e; }
    </style>
</head>
<body>
<p id="result"></p>
<script>
    document.getElementById('result').innerHTML = window.atob && atob('bXliajEyMw==');
</script>
</body>

结果如下:

Base64解码

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解码。

Base64编码

语法(浏览器中):

var encodedData = window.btoa(stringToEncode);

或者(浏览器或js Worker线程中):

var encodedData = self.btoa(stringToEncode);

例如:

window.btoa('mybj23');
// 返回:'bXliajEyMw=='

完整代码如下:

<head>
    <meta charset="UTF-8">
    <title>Base64编码</title>
    <style>
        p { color: #0e932e; }
    </style>
</head>
<body>
<p id="result"></p>
<script>
    document.getElementById('result').innerHTML = window.btoa && btoa('mybj123');
</script>
</body>

效果如下:

Base64编码

btoa这个方法名称乍一看,很奇怪,不知道这个单词什么意思。我们可以理解为B to A,也就是从B到A。那B指什么,A指什么呢?和atob方法一样,B指的是low B普通字符串,A指的是Base64字符。

因此,btoa方法表示low B普通字符to Base64字符,也就是Base64编码。

文章到这儿貌似还没有结束,我在测试的时候发现上面的方法对于字母数字的数据转换没有问题,但如果是中文Base64数据转换会有报错问题。

中文Base64数据转换会有报错问题

通过查资料我们可以试试下面这样:

btoa(unescape(encodeURIComponent(str)))

我用SVG代码测试是OK的。

网友也提出了解决方法,就是中文先encode转码和decode编码:

window.btoa(window.encodeURIComponent('嘻嘻哈哈哈哈啦啦啦啦'));
window.decodeURIComponent(window.atob('JUU1JTk4JUJCJUU1JTk4JUJCJUU1JTkzJTg4JUU1JTkzJTg4JUU1JTkzJTg4JUU1JTkzJTg4JUU1JTk1JUE2JUU1JTk1JUE2JUU1JTk1JUE2JUU1JTk1JUE2'));

I大发六合彩E8/IE9的polyfill

当下,仍有不少PC项目还需要兼容IE9,所以,我们可以专门针对这些浏览器再引入一段ployfill脚本或者一个JS文件即可。

ployfill JS脚本戳这里,或者直接右键这里下载源文件!

实际使用,我们可以借助IE条件注释无缝对接。

也就是HTML中嵌入大发六合彩下面一段代码:

<!--[if IE]>
<script src="./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这个语法。

完整大发六合彩代码如下:

<head>
    <meta charset="UTF-8">
    <title>Base64解码/编码</title>
    <style>
        p { color: #0e932e; }
    </style>
    <!--[if IE]>
    <script src="js/base64-polyfill.js"></script>
    <![endif]-->
</head>
<body>
<p id="result1"></p>
<p id="result2"></p>
<script>
    result1.innerHTML = atob('bXliajEyMw==');
    result2.innerHTML = btoa('mybj123');
</script>

结大发六合彩果显示:

IE8/IE9的polyfill

在Chrome浏览器下,可以看到大发六合彩没有polyfill相关JS的加载:

在Chrome浏览器下,可以看到没有polyfill相关JS的加载

而IE8原生不支持atob和btoa方法的浏览器也正常编码解码Base64字符了,如下截图:

而IE8原生不支持atob和btoa方法的浏览器也正常编码解码Base64字符了

以上就是今天关于如何利用浏览器原生支持JS的Base64编码解码的全部知识,个人学习总结,仅供小伙伴们参考,也许你有更好的方法,欢迎指正。

转载请注明:大发六合彩 &r大发六合彩aquo; 如何利用浏览器原生支持JS的Base64编码解码

喜欢 (15)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址