前端页面之间传递数据

在前端多页面开发过程中，会经常在页面与页面中间跳转，在跳转过程中，总有些数据是要传递的，当然我们可以用locationStorage 对象来存储，也可以自己生成对象，下挂window对象来传递，这些本次暂不讨论。

我们讨论用URL来传递数据的情况：

假设A页面要跳转到B页面，这个过程中要传递一个简单的JSON对象类型：

Student={name:"wsp",age:"24"}

浏览器时不支持传递Object对象的，只支持String 类型的数据，故我们要对这个JSON对象进行序列化：使用 JSON.stringify方法

StriStu=JSON.stringify(Student);

序列化之后就可以进行跳转链接了：

location="b.html?Student="+StriStu

但是这个时候会发现浏览器URL是这样显示的：

b.html?Student={"name":"wsp","age":"24"}

这样显然是我们不希望的：因为如果有中文字符，浏览器会对字符进行编码，这样我们在b.html就解析不出了，而且这样看起来很不专业，那么我们就要在传递数据前，先对数据进行编码，这时采用window.encodeURIComponent 来进行编码，之后进行传递：

location="b.html?Student="+window.encodeURIComponent(StriStu)

浏览器地址栏显示如下：

b.html?Student=%7B"name"%3A"wsp"%2C"age"%3A"24"%7D

---

至此看起来已经是一个看起来比较专业的url了。

下面到了B页面解析部分了：

要获取对象，即可以用 location.serach 来获取传递值，当然我们要进行解密，解编码用相反的方法：decodeURIComponent，下面进行解析：

var Student=decodeURIComponent(location.search.slice(1).split("=")[1])

现在就可以还原原来的对象了，可以在新页面使用了。

 

转载于:https://www.cnblogs.com/wangshiping/p/5462649.html