• Window 中的自带方法Base64


    Base64 简单实用方法

    一、引入Base64方法

    使用很简单,浏览器引入该JS文件,然后Base64编码这样:

    Base64.encode('zhangxinxu');
    // 返回:'emhhbmd4aW54dQ=='

    解码就调用decode方法,如下:

    Base64.decode('emhhbmd4aW54dQ==');
    // 返回:'zhangxinxu'

    数据准确,功能良好。当时弄完还洋洋得意,以为是个完美的解决。

    结果,今天发现,尼玛原来浏览器很早就支持了JS Base64加密解密,而上面这种洋洋得意的做法完全就是瞎子点灯——白费蜡!根本就不是一个好的技术选型。

    由于技术广度掌握不足,或者说JS基础掌握不牢,导致浪费了大把时间去找Base64的JS语言库,学习其API用法,换来一个冗余完全不需要加载的JS,现在来看,真是个糟糕的技术选型。

    二、原生atob和btoa方法

    实际上,从IE10+浏览器开始,所有浏览器就原生提供了Base64编码解码方法,不仅可以用于浏览器环境,Service Worker环境也可以使用。

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

    1. Base64解码

    语法为(浏览器中):

    var decodedData = window.atob(encodedData);

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

    var decodedData = self.atob(encodedData);

    例如:

    window.atob('emhhbmd4aW54dQ==');
    // 返回:'zhangxinxu'

    结果如下图:


    记住atob

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

    2. Base64编码

    语法为(浏览器中):

    var encodedData = window.btoa(stringToEncode);

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

    var encodedData = self.btoa(stringToEncode);

    例如:

    window.btoa('zhangxinxu');
    // 返回:'emhhbmd4aW54dQ=='

    结果如下图:


    记住btoa方法

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

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

    补充于2018-08-09
    有人提到中文Base64数据转换会有报错问题。

    雾霜月同学提出了解决方法,就是中文先encode转码和decode编码:

    window.btoa(window.encodeURIComponent('嘻嘻哈哈哈哈啦啦啦啦'));
    window.decodeURIComponent(window.atob('JUU1JTk4JUJCJUU1JTk4JUJCJUU1JTkzJTg4JUU1JTkzJTg4JUU1JTkzJTg4JUU1JTkzJTg4JUU1JTk1JUE2JUU1JTk1JUE2JUU1JTk1JUE2JUU1JTk1JUE2'));
     
  • 相关阅读:
    详解ASP.NET页面的asp“.NET研究”x扩展 狼人:
    Microsoft NLa“.NET研究”yerApp案例理论与实践 多层架构与应用系统设计原则 狼人:
    HTML5 搭建“.NET研究”移动Web应用 狼人:
    VS201“.NET研究”0 C++下编译调试MongoDB源码 狼人:
    Silverlight 的多线程能力(下“.NET技术”) 狼人:
    Log4Net 全方“.NET技术”位跟踪程序运行 狼人:
    三种属性操作性能比较:PropertyInfo + Expression Tree + Delega“.NET技术”te.CreateDelegate 狼人:
    .NET简谈观察者“.NET技术”模式 狼人:
    Microsoft NLayerApp案例理论与实践 项目简“.NET研究”介与环境搭建 狼人:
    “.NET研究”专访微软MVP衣明志:走进ASP.NET MVC 2框架开发 狼人:
  • 原文地址:https://www.cnblogs.com/GongYaLei/p/9580713.html
Copyright © 2020-2023  润新知