Javascript实现base64的加密解密方法示例


Posted in Javascript onJune 27, 2017

这几天使用PHP向前端传值的时候,遇到一个问题,要将代码传过去赋值。如果使用urlencode()和urldecode()函数,就会出现js无法解码的情况,因为php和js的相关函数算法不一致。于是准备使用通用的base64加密解密。

base64 加密解密

下方是base64用javascript写出来的函数和方法。

//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.加密、解密算法封装:
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实现base64的加密解密方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javscript对象原型的一些看法
Sep 19 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
Vue微信公众号网页分享的示例代码
May 28 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
详解JavaScript数据类型和判断方法
Sep 04 Javascript
微信小程序 空白页重定向解决办法
Jun 27 #Javascript
ionic 自定义弹框效果
Jun 27 #Javascript
js脚本编写简单刷票投票系统
Jun 27 #Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 #Javascript
详解vue.js的事件处理器v-on:click
Jun 27 #Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 #Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 #Javascript
You might like
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
php的计数器程序
2006/10/09 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
用javascript获取地址栏参数
2006/12/22 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
JS中表单的使用小结
2014/01/11 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
化学教师教学反思
2014/01/17 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
Oracle中update和select 关联操作
2022/01/18 Oracle
Vue h函数的使用详解
2022/02/18 Vue.js