JS 实现Base64编码与解码实例详解


Posted in Javascript onNovember 07, 2016

Js实现Base64编码与解码

Base64其实是一种简单的置换加密方式,但是BASE64的用处往往并不是为了防止信息泄露,而且为了方便传输,进过BASE64编码后的信息会比原始信息长,大概是4/3倍。

Base64是一种基于64个可打印字符来表示二进制数据的表示方法。由于2的6次方等于64,所以每6个比特为一个单元,对应某个可打印字符。

Base64常用于在通常处理文本数据的场合,表示、传输、存储一些二进制数据。包括MIME的email,email via MIME, 在XML中存储复杂数据。

1.加密解密方法使用:

//1.加密 
var str = '124中文内容'; 
var base = new Base64(); 
var result = base.encode(str); 
//document.write(result); 
//2.解密 
var result2 = base.decode(result); 
document.write(result2);

2.加密、解密算法封装:

/** 
* 
* Base64 encode / decode 
* 
* @author haitao.tu 
* @date 2010-04-26 
* @email tuhaitao@foxmail.com 
* 
*/ 
function Base64() { 
 
 // private property 
 _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; 
 
 // public method for encoding 
 this.encode = function (input) { 
  var output = ""; 
  var chr1, chr2, chr3, enc1, enc2, enc3, enc4; 
  var i = 0; 
  input = _utf8_encode(input); 
  while (i < input.length) { 
   chr1 = input.charCodeAt(i++); 
   chr2 = input.charCodeAt(i++); 
   chr3 = input.charCodeAt(i++); 
   enc1 = chr1 >> 2; 
   enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); 
   enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); 
   enc4 = chr3 & 63; 
   if (isNaN(chr2)) { 
    enc3 = enc4 = 64; 
   } else if (isNaN(chr3)) { 
    enc4 = 64; 
   } 
   output = output + 
   _keyStr.charAt(enc1) + _keyStr.charAt(enc2) + 
   _keyStr.charAt(enc3) + _keyStr.charAt(enc4); 
  } 
  return output; 
 } 
 
 // public method for decoding 
 this.decode = function (input) { 
  var output = ""; 
  var chr1, chr2, chr3; 
  var enc1, enc2, enc3, enc4; 
  var i = 0; 
  input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); 
  while (i < input.length) { 
   enc1 = _keyStr.indexOf(input.charAt(i++)); 
   enc2 = _keyStr.indexOf(input.charAt(i++)); 
   enc3 = _keyStr.indexOf(input.charAt(i++)); 
   enc4 = _keyStr.indexOf(input.charAt(i++)); 
   chr1 = (enc1 << 2) | (enc2 >> 4); 
   chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); 
   chr3 = ((enc3 & 3) << 6) | enc4; 
   output = output + String.fromCharCode(chr1); 
   if (enc3 != 64) { 
    output = output + String.fromCharCode(chr2); 
   } 
   if (enc4 != 64) { 
    output = output + String.fromCharCode(chr3); 
   } 
  } 
  output = _utf8_decode(output); 
  return output; 
 } 
 
 // private method for UTF-8 encoding 
 _utf8_encode = function (string) { 
  string = string.replace(/\r\n/g,"\n"); 
  var utftext = ""; 
  for (var n = 0; n < string.length; n++) { 
   var c = string.charCodeAt(n); 
   if (c < 128) { 
    utftext += String.fromCharCode(c); 
   } else if((c > 127) && (c < 2048)) { 
    utftext += String.fromCharCode((c >> 6) | 192); 
    utftext += String.fromCharCode((c & 63) | 128); 
   } else { 
    utftext += String.fromCharCode((c >> 12) | 224); 
    utftext += String.fromCharCode(((c >> 6) & 63) | 128); 
    utftext += String.fromCharCode((c & 63) | 128); 
   } 
 
  } 
  return utftext; 
 } 
 
 // private method for UTF-8 decoding 
 _utf8_decode = function (utftext) { 
  var string = ""; 
  var i = 0; 
  var c = c1 = c2 = 0; 
  while ( i < utftext.length ) { 
   c = utftext.charCodeAt(i); 
   if (c < 128) { 
    string += String.fromCharCode(c); 
    i++; 
   } else if((c > 191) && (c < 224)) { 
    c2 = utftext.charCodeAt(i+1); 
    string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); 
    i += 2; 
   } else { 
    c2 = utftext.charCodeAt(i+1); 
    c3 = utftext.charCodeAt(i+2); 
    string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); 
    i += 3; 
   } 
  } 
  return string; 
 } 
}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JS 创建对象(常见的几种方法)
Nov 03 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
AngularJS表单验证功能分析
May 26 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
react的hooks的用法详解
Oct 12 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
百度多文件异步上传控件webuploader基本用法解析
Nov 07 #Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 #Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 #Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 #Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 #Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 #Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 #Javascript
You might like
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
python实现简易内存监控
2018/06/21 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
python3.7 的新特性详解
2019/07/25 Python
python函数的作用域及关键字详解
2019/08/20 Python
Python requests模块cookie实例解析
2020/04/14 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
小学班主任寄语大全
2014/04/04 职场文书
七夕情人节促销方案
2014/06/07 职场文书
自荐信格式范文
2015/03/04 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript