window.atob() 与window.btoa()

WindowBase64.atob() 函数用来解码一个已经被base-64编码过的数据。你可以使用 window.btoa() 方法来编码一个可能在传输过程中出现问题的数据,并且在接受数据之后,使用 window.atob() 方法来将数据解码。例如:你可以把ASCII里面数值0到31的控制字符进行编码,传输和解码。

window.btoa():将ascii字符串或二进制数据转换成一个base64编码过的字符串,该方法不能直接作用于Unicode字符串.

语法:

var decodedData = window.atob(encodedData);

例子:

var encodedData = window.btoa("Hello, world"); // 编码
var decodedData = window.atob(encodedData); // 解码

其兼容性是主流浏览器,IE10及以上。

Unicode 字符串

在各浏览器中,使用 window.btoa 对Unicode字符串进行编码都会触发一个字符越界的异常.

先把Unicode字符串转换为UTF-8编码,可以解决这个问题, 代码来自Johan Sundstr?m:

function utf8_to_b64( str ) {
return window.btoa(unescape(encodeURIComponent( str )));
} function b64_to_utf8( str ) {
return decodeURIComponent(escape(window.atob( str )));
} // Usage:
utf8_to_b64('? à la mode'); // "4pyTIMOgIGxhIG1vZGU="
b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "? à la mode"
//译者注:在js引擎内部,encodeURIComponent(str)相当于escape(unicodeToUTF8(str))
//所以可以推导出unicodeToUTF8(str)等同于unescape(encodeURIComponent(str))

decodeURIComponent() 与encodeURIComponent()

这里用到了encodeURIComponent()与decodeURIComponent()方法,下面简单介绍下:

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

下面给个例子:

<script type="text/javascript">

var test1="http://www.w3school.com.cn/My first/"

document.write(encodeURIComponent(test1)+ "<br />")
document.write(decodeURIComponent(test1)) </script>

输出的结果:

http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F
http://www.w3school.com.cn/My first/

下个例子, encodeURIComponent() 对 URI 进行编码:

<script type="text/javascript">

document.write(encodeURIComponent("http://www.w3school.com.cn"))
document.write("<br />")
document.write(encodeURIComponent("http://www.w3school.com.cn/p 1/"))
document.write("<br />")
document.write(encodeURIComponent(",/?:@&=+$#")) </script>

输出结果:

http%3A%2F%2Fwww.w3school.com.cn
http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F
%2C%2F%3F%3A%40%26%3D%2B%24%23

关于encodeURIComponent()与decodeURIComponent()的参考地址:

JavaScript decodeURIComponent() 函数JavaScript encodeURIComponent() 函数

 escape() 与unescape() 方法

escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。

语法:escape(string)

返回值:已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。

说明:该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: * @ - _ + . / 。其他所有的字符都会被转义序列替换。

参考地址:https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/btoa

https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/atob

http://www.w3school.com.cn/jsref/jsref_escape.asp

window.atob()与window.btoa()方法实现编码与解码的更多相关文章

  1. JS实现Base64编码、解码,即window.atob,window.btoa功能

    window.atob(),window.btoa()方法可以对字符串精选base64编码和解码,但是有些环境比如nuxt的服务端环境没法使用window,所以需要自己实现一个base64的编码解码功 ...

  2. window.btoa 和 window.atob

    前一段时间被安全部门查出,明文传递密码,被要求整改. 然后就进行了引入了第三方的base64编码的js库,进行了编码然后传递. 其实在前端的加密都是寻求一个心理安慰,作用是微乎其微的,确实也更加好那么 ...

  3. 利用window对象自带atob和btoa方法进行base64的编码和解码

    项目中一般需要将表单中的数据进行编码之后再进行传输到服务器,这个时候就需要base64编码 现在可以使用window自带的方法window.atob() 和  window.btoa()  方法进行 ...

  4. 使用window.btoa和window.atob来进行Base64编码和解码

      方法描述 WindowBase64.atob() 函数用来解码一个已经被base-64编码过的数据. WindowBase64.btoa() 函数 将ascii字符串或二进制数据转换成一个base ...

  5. javascript实现base64编码、解码

    我们知道,浏览器的window对象提供有window.atob()和window.btoa()方法可以对字符串进行Base64编码和解码. console.log(window.btoa(window ...

  6. js将多个方法添加到window对象上的多种方法

    方法一:(最简单也是最笨的方法) window.a = function(){}window.b = function(){}window.c = function(){} 方法二:(利用jq的ext ...

  7. window对象中的常见方法

    <body><!-- window对象中的常见方法--><script type="text/javascript"> var timeid; ...

  8. window.opener调用父窗体方法的用法

    应用实例:        function BindWindowCloss() {            $(window).bind('beforeunload', function () {    ...

  9. window.history.back()的改进方法window.history.go()

    今天在做项目时,測试人员提出了一条bug,起初没当回事,在改动过程中才意识到其重要性,故记录下来. 依照需求,系统应该实现例如以下的功能:有三个关联的页面a.aspx(简称a),b.aspx(简称b) ...

随机推荐

  1. Windows2000源代码 200+MB

    全球最大的软件制造商微软2月12日警告公众称其一部分珍贵的Windows NT和Windows 2000操作系统源代码被泄漏到了一些在线文件共享网络中. 微软称被泄漏的代码只是整个程序的一小部分,但这 ...

  2. Cocos2d3.0 制作PList文件

    auto root = Dictionary::create(); auto string = String::create("string element value"); ro ...

  3. 游戏AI-行为树理论及实现

    从上古卷轴中形形色色的人物,到NBA2K中挥洒汗水的球员,从使命召唤中诡计多端的敌人,到刺客信条中栩栩如生的人群.游戏AI几乎存在于游戏中的每个角落,默默构建出一个令人神往的庞大游戏世界. 那么这些复 ...

  4. 基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

    在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往往需要对记录 ...

  5. thinkphp5URL和路由

    前面的话 本文将详细介绍thinkphp5URL和路由 URL访问 ThinkPHP采用单一入口模式访问应用,对应用的所有请求都定向到应用的入口文件,系统会从URL参数中解析当前请求的模块.控制器和操 ...

  6. Elasticsearch聚合——aggregation

    聚合提供了分组并统计数据的能力.理解聚合的最简单的方式是将其粗略地等同为SQL的GROUP BY和SQL聚合函数.在Elasticsearch中,你可以在一个响应中同时返回命中的数据和聚合结果.你可以 ...

  7. 源生js惯性滚动与回弹效果

    在写移动端的APP或者页面时,经常会遇到惯性滚动与回弹效果.用插件iscroll可以轻松解决这个问题,大多数的移动框架也能轻松解决这个问题,它们内部都封装了这个效果. 一直好奇这个效果原生JS是怎么实 ...

  8. [.Net跨平台]部署DTCMS到Jexus遇到的问题及解决思路---Linux环境搭建

    最近朋友托我帮忙研究如何把一个DTCMS部署到Linux下,经过1天的研究,部署基本成功,可能有些细节还未注意到,现在把心得分享一下.过程比预期的要简单 身为.Net程序员,这个问题的第一步可能就是如 ...

  9. NodeJs学习笔记(三)

    最近在用sails框架写移动后台,马上就过年了,打算总结一下.   1.资源      node官方网站: www.nodejs.org      sails官方网站:www.sailsjs.org ...

  10. cell的复用机制

    以下全部都是转载自别人的博客:http://blog.sina.com.cn/s/blog_9c3c519b01016aqu.html 转自:http://www.2cto.com/kf/201207 ...