首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

window.atob和btoa进行base64编码解码

2019年01月17日 发布 阅读(600) 作者:懒炖

你还在用插件来进行base64加密解密吗?看到这个文章,你就不需要插件了,JS原生就支持base64转码,而且浏览器支持还不错。

概述

  • window.atob—可以理解成解码base64。指把a解码成ba指的是base64字符串,b是普通字符

  • window.btoa—可以理解成base64编码。即把普通字符串转成base64

浏览器兼容

IE10开始,基本上所有浏览器都支持,IE8/IE9可以使用polyfill(如 https://github.com/MaxArt2501/base64-js/blob/master/base64.js ),网上还有很多,可以找找适合自己的

https://www.caniuse.com/#search=atob
https://www.caniuse.com/#search=btoa

编码问题

如直接使用window.btoa编码中中文是会报错的。

  1. window.btoa('前端')
  2. VM134:1 Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
  3. at <anonymous>:1:9

解决办法
由于 window.btoa 仅支持 ASCII 字符序列,如果通过 encodeURIComponent 将中文字符编码成ASCII字符序列

  1. // 编码:
  2. window.btoa(encodeURIComponent('我是前端'))
  3. "JUU2JTg4JTkxJUU2JTk4JUFGJUU1JTg5JThEJUU3JUFCJUFG"
  4. // 解码:
  5. decodeURIComponent(window.atob(encodeURIComponent('JUU2JTg4JTkxJUU2JTk4JUFGJUU1JTg5JThEJUU3JUFCJUFG')))
  6. "我是前端"

参考

https://www.zhangxinxu.com/wordpress/2018/08/js-base64-atob-btoa-encode-decode/
https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/atob
https://blog.coding.net/blog/resolve-atob-decode-chinese-character-outputting-messy-code-problem-in-javascript

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •