本例中,主要使用了window.btoa()方法、window.atob()方法以及自己写的GetQueryString()方法。
window.btoa()
btoa() 方法用于创建一个 base-64 编码的字符串。
window.atob()
atob() 方法用于解码使用 base-64 编码的字符串。
GetQueryString() 用于获取URL参数
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURI(r[2]); return null;
}
在日常工作中,如果只需要传递一些简单的字符串,可以直接使用getQueryString方法即可,例如:
http://www.baidu.com?name=jack
let name = getQueryString('name')
console.log(name) // jack
但是我们可能会遇到一些复杂的参数,例如多层嵌套的JSON对象,或者一个包含了各种复杂参数的URL等等,一般情况下会使用localstorage或者其它方法来解决,但我认为这种方法实在不友好,如果遇到多页面的复杂功能,localstorage又没有在使用过后就删除,那么传来传去自己都迷糊了。
传递多层嵌套的JSON数组
// a页面
var obj = {
a:1,
b:{
name:'jack',
list:[1,2,3,4,5]
}
}
let test = window.btoa(JSON.stringify(obj))
window.location.href = './b.html?test=' + test
// b页面
let _test = window.atob(getQueryString('test'))
console.log(JSON.parse(_test)) // 输出obj完整数据
传递复杂URL
var url = 'http://www.baidu.com?a=1&b=2'
let test = window.btoa(JSON.stringify(url))
和传递JSON对象一样取值即可。
补充2019年7月24日 17:46:07:
如果按照上述方法,传递中文会报错,于是我借助window.encodeURI来解决,封装好方法如下:
// 生成base64
function getObjectBase64(arg){
return window.btoa(window.encodeURI(JSON.stringify(arg)))
}
// 解析base64
function parseObjectBase64(arg) {
return JSON.parse(window.decodeURI(window.atob(arg)))
}