Base64是一种基于64个可打印字符来表示二进制数据的表示方法。在Base64中的可打印字符包括字母A-Z、a-z、数字0-9,这样共有62个字符,此外两个可打印符号在不同的系统中而不同(维基百科:https://zh.wikipedia.org/wiki/Base64)
在url传输数据时,会用到base64编码。为什么:(https://segmentfault.com/q/1010000000801988)
以前在编码解码的时候,都需要在网上找base64的工具库。其实,浏览器内置了编码解码的函数:window.btoa() window.atob()
浏览器支持情况:https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/atob

在用的时候,注意中文直接编码会出现问题。
包含中文的时候,用下面的方法:

function utf8_to_b64( str ) {
return window.btoa(unescape(encodeURIComponent( str )));
}
function b64_to_utf8( str ) {
return decodeURIComponent(escape(window.atob( str )));
}

有时候你会看到这样的代码:

//str中没有中文
window.btoa(str).replace(/\//g, '_').replace(/\+/g, '-');

这是因为:即使通过base64编码,64个字符除了A-Z、a-z、数字0-9(总共62个),最后2个可打印字符:/和+,url参数中会转义这2个字符(如果出现,会被转义)。所以,还需要替换这2种字符。

浏览器内置的base64方法的更多相关文章

  1. 浏览器内置Console函数使用详解

    浏览器内置Console函数比较好用:Chrome 和 FireFox(Firebug插件) 利用此功能可以像直接在面板里面运行JS一样(写法不同而已) 一.显示信息的命令 Firebug内置一个co ...

  2. 现代浏览器内置的可等效替代jQuery的功能

    jQuery的体积在不断的增大.新功能要不断增加,这是必然结果.虽然从版本1.8.3开始的瘦身效果明显,但不可否认的是,对于移动手机端的网 页开发,它仍然是不可接受的.当然,jQuery不是铁板一块, ...

  3. jsp内置对象的方法

    JSP内置对象的方法:out:out.print();request:request对象主要用于出列客户端请求.   常用方法:    String getParameter(String name) ...

  4. JavaScript (内置对象及方法)

    JavaScript中的对象分为3种:内置对象.浏览器对象.自定义对象 JavaScript 提供多个内置对象:Math/Array/Number/String/Boolean... 对象只是带有属性 ...

  5. 利用jQuery内置的data()方法存储数据

    jQuery提供了内置的data()方法,与DOM元素不同的是,它可以用来存储key/value类型的数据.数据的存储是很容易的: $('#myDiv').data('currentState', ' ...

  6. JS高级——扩展内置对象的方法

    基本概念 内置对象有很多,几个比较重要的:Math.String.Date.Array 基本使用 1.内置对象创建出来的对象使用的方法使用的其实都是内置对象的原型对象中的方法 (1)a并没有charA ...

  7. 一个禁用mac内置键盘的方法

    一个禁用mac内置键盘的方法 强大的 karabiner, 非常好用. 可以直接在有外接键盘连接的情况下, 禁用掉内置键盘 另外一个方法是启用mac的 鼠标键, 感觉用处不是很大, 修饰健并没有被禁用 ...

  8. Ruby Rails学习中:Ruby内置的辅助方法,基础内容回顾补充

    一. Ruby内置的辅助方法 1.打开文件:app/views/layouts/application.html.erb(演示应用的网站布局) 来咱把注意力放在圈起来的那一行: 这行代码使用 Rail ...

  9. Python字典内置函数和方法

    Python字典内置函数和方法: 注:使用了 items.values.keys 返回的是可迭代对象,可以使用 list 转化为列表. len(字典名): 返回键的个数,即字典的长度 # len(字典 ...

随机推荐

  1. nyoj_71_独木舟上的旅行_201312122051

    独木舟上的旅行 时间限制:3000 ms  |           内存限制:65535 KB 难度:2   描述 进行一次独木舟的旅行活动,独木舟可以在港口租到,并且之间没有区别.一条独木舟最多只能 ...

  2. Openfire:解决乱码问题

    当部署openfire后,创建用户和发送离线消息时会出现中文字符乱码的问题.要解决这个问题需要同时配置openfire和mysql两端. 首先openfire端,在安装页面中指定odbc连接串中需要带 ...

  3. Workflow:实现一个简单的审批流程

    1. 创建一个空白的项目,在其中创建Host – Windows Console Application,Client – Windows forms Application和DataExchange ...

  4. CSS Display属性与盒模型

    由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box ...

  5. 关东升的《从零開始学Swift》即将出版

    大家好: 苹果2015WWDC大会公布了Swift2.0,它较之前的版本号Swift1.x有非常大的变化.所以我即将出版<从零開始学Swift><从零開始学Swift>将在&l ...

  6. but no declaration can be found for element &#39;aop:aspectj-autoproxy&#39;.

    1.错误描写叙述 Multiple annotations found at this line: - cvc-complex-type.2.4.c: The matching wildcard is ...

  7. 写一个android内置android程序

    当我们编译完毕android源代码之后,就须要对他做点什么事情,我如今正在看老罗的"Android源代码情景分析"一书.在这里主要是记录一些书中没有说清楚的地方. 相同.我们创建一 ...

  8. Android 组件ContentProvider

    Android 组件ContentProvider Android的数据存储有五种方式Shared Preferences.网络存储.文件存储.外储存储.SQLite,一般这些存储都仅仅是在单独的一个 ...

  9. HTML如何让IMG自动适应DIV容器大小

    版权声明:本文为博主原创文章,未经博主允许不得转载.作者:沙师弟专栏 https://blog.csdn.net/u014597198/article/details/80403946HTML如何让I ...

  10. CreateWindowEx和CreateWindow的区别

    CreateWindowEx 函数功能:该函数创建一个具有扩展风格的重叠式窗口.弹出式窗口或子窗口,其他与 CreateWindow函数相同.关于创建窗口和其他参数的内容,请参看CreateWindo ...