JavaScript通过URL传递复杂参数

本例中，主要使用了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)))
    }