url传递中文参数

url传递中文参数

// send.html
var key = '测试'
location.href = `receive.html?key=${key}`

// receive.html
var val =location.search.split('=')[1]
var el = document.getElementById('content')
el.innerText = val;

通常，如果我们直接将中文写在url中，得到的却是一堆乱码（%E6%B5%8B%E8%AF%95），因为这涉及到编码问题。如果你设置了编码方式为utf-8，则它会将中文编译为英文，如果对应的页面的编码方式也为utf-8，则就直接显示编译后的中文

解决方法：
1.encodeURI/decodeURI

encodeURI 会替换所有的字符，但不包括以下字符，即使它们具有适当的UTF-8转义序列：

// receive.html
var val =location.search.split('=')[1]
var el = document.getElementById('content')
// decodeURI:将已编码 URI 中所有能识别的转义序列转换成原字符，但不能解码那些不会被 encodeURI 编码的内容（例如 "#"）
el.innerText = decodeURI(val);

2.decodeURIComponent/encodeURIComponent
当遇到测试&key=测试这种情况，通过第一种方法就得到了2个键值对，这时encodeURIComponent 就可以发挥它的作用了

encodeURIComponent 轉義除了以下字元外的所有字元：
A-Z a-z 0-9 - _ . ! ~ * ’ ( )

// send.html
var key = "测试&key=测试"
location.href = `receive.html?key=${key}`
location.href = `receive.html?key=${encodeURIComponent(key)}`

// receive.html
var val =location.search.split('=')[1]
var el = document.getElementById('content')
el.innerText = decodeURIComponent(val);

总结：

1. 参数中如果不存在特殊字符的话，1、2都可以；
2. 参数中如果存在特殊字符的话，使用2；
3. 如果是对整个url进行编译，url中有/、？等特殊字符，不能进行编译，则使用1；
4. escape和unescape已经被废弃，最好别用

拓展：
如果只是单纯的想传递中文参数，可以通过sessionStorage或localStorage

// send.html
var key = "测试&key=测试"
location.href = `receive.html`
sessionStorage.setItem('key',key)

// receive.html
var val = sessionStorage.getItem('key')
var el = document.getElementById('content')
el.innerText = val;