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 相关文章推荐
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
百度多文件异步上传控件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
php注销代码(session注销)
2012/05/31 PHP
33道php常见面试题及答案
2015/07/06 PHP
php判断当前操作系统类型
2015/10/28 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
Python中正则表达式的用法总结
2019/02/22 Python
Python简单I/O操作示例
2019/03/18 Python
python库matplotlib绘制坐标图
2019/10/18 Python
Python requests模块session代码实例
2020/04/14 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
中学家长会邀请函
2014/01/17 职场文书
家长对孩子的感言
2014/03/10 职场文书
考核评语大全
2014/04/29 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
投资申请报告
2015/05/19 职场文书