JS有哪⼏种传参⽅式？
1.背景介绍
我们今天讲的传参是指页⾯之间的数据传递。
传统的前端开发中，页⾯之间是少有参数交互的，甚⾄没有，⽽在如今的前端环境下，
⼀个稍微正式点的项⽬都不可能少了页⾯间传参，页⾯的跨越、服务器后台进⾏数据请求等，都需要⼀个或多个传参的⽅法。
那么参数在不同的页⾯间进⾏传递，⼀个页⾯的参数被另⼀页⾯使⽤，如何才能做到不同页⾯间进⾏参数传递？
在JS中有多种页⾯传递参数的⽅法：
⼀、URL
把参数值附在url后⾯传递到其他页⾯
⼆、H5 web storage
localStroage 和 sessionStorage
三、Cookie
使⽤浏览器Cookie传递参数
四、Form 表单
Form表单通过URL传递参数
2.知识剖析
2.1、URL传参
把参数值附在url后⾯传递到其他页⾯
如：
其中 “user=laozhang”和 “pwd=66666”就是我们传递的参数名称和值。
url和参数之间⽤ "?"隔开
多个参数之间⽤ "&"符号连接。
URL地址传递参数的⼏个特点：
优点：
1、 URL地址法简洁易⽤，可同时传递多个字符型参数；
2、 URL地址法可以很⽅便的在页⾯之间切换并传递参数，⽆需额外的处理，基于正常情况⽐较不会性能损失；
不⾜：
3、 URL传递参数长度受限，最⼤为2K；
4、 URL只能传递字符型参数，传递中⽂时，由于发送页⾯和接收页⾯的字符编码⽅式不⼀样⽽导致参数解析处理错误，参数包含中⽂时可能出现乱码或者参数接收错误；
5、 信息泄露：URL地址在客户端可见，所以涉及隐私的参数需进⾏加密后才能进⾏传递，不加密传输会导致信息泄露，产⽣安全隐患。
2.2、H5 web storage
1、sessionStorage⽤于本地存储⼀个会话（session）中的数据，这些数据只有在同⼀个会话中的页⾯才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是⼀种持久化的本地存储，仅仅是会话级别的存储。
2、localStorage HTML5本地存储web storage特性的API之⼀，⽤于将⼤量数据（最⼤5M）保存在浏览器中
. 保存后数据永远存在不会失效过期，除⾮⼿动清除。
. 不参与⽹络传输。
. ⼀般⽤于性能优化，可以保存图⽚、js、css、html 模板、⼤量数据。
3、数据以 键/值 （key/value）对存在, web⽹页的数据只允许该域访问使⽤
4、不管是 localStorage，还是 sessionStorage，可使⽤的API都相同，常⽤的有如下⼏个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：Item(key);
删除单个数据：veItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
5、数据储存：
在有多组数据需要储存时，⼀般:
.建⽴⼀个新的对象，然后将多组数据储存在对象中，
.使⽤ JSON.stringify() 来将对象转换为字符串，
.使⽤localStorage.setItem(key,value)；保存数据。
6、数据提取：
.使⽤Item(key)读取数据
.
使⽤ JSON.parse ⽅法将字符串转换为 JSON 对象。js获取json的key和value
. 直接引⽤对象的各个值。
2.3、Cookie
Cookie是什么
Cookie是当你浏览某⽹站时，⽹站存储在你机器上的⼀个⼩⽂本⽂件，
它记录了你的⽤户ID，密码、浏览过的⽹页、停留的时间等信息，当你再次来到该⽹站时，
⽹站通过读取Cookie，得知你的相关信息，就可以做出相应的动作，如在页⾯显⽰欢迎你的标语，
或者让你不⽤输⼊ID、密码就直接登录等等
Cookie⼀般有两个作⽤。
第⼀个作⽤是识别⽤户⾝份。
再次访问
第⼆个作⽤是记录历史。
cart=A1,A2」，表⽰购物车⾥有 A1 和
A2 两样商品了。
这样⼀来，当⽤户关闭⽹页，过三天再打开⽹页的时候，依然可以看到 A1、A2 躺在购物车⾥，因为浏览器并不会⽆缘⽆故地删除这个Cookie。
借此，就达到⾥记录⽤户操作历史的⽬的了。
Cookie的⼀些特点。
1.Cookie可以使⽤ js 在浏览器直接设置（⽤于记录不敏感信息，如⽤户名）, 也可以在服务端通使⽤ HTTP 协议规定的 set-cookie
来让浏览器种下Cookie，这是最常见的做法。
2.每次⽹络请求 Request headers 中都会带上Cookie。所以如果 Cookie太多太⼤对传输效率会有影响。
3.⼀般浏览器存储Cookie最⼤容量为4k，所以⼤量数据不要存到Cookie。
2.4、Form 表单
Form表单传值也是通过URL传递参数
<form action="page2.html" method="get">
<input type="text"name="user"value="laozhang">
<input type="text"name="pwd"value="666666">
<input type="submit"value="通过传递参数">
</form>
跳转⾄page2时，
url为: page2?id=laozhang&name=666666
通常使⽤的表单的提交⽅式主要是：
post和get两种。
两者的区别在于：post⽅式是把数据内容放在请求的数据正⽂部分，没有长度的限制;
get⽅式则是把数据内容直接跟在请求的头部的URL后⾯，有长度的限制。
⽽⼀般在表单的数据提交中，都会选择POST⽅式，
因为使⽤GET⽅法数据是通过URL传递的，在地址栏中会直接看到传递的数据，这样就缺少安全性。
⽽使⽤POST传递时，是把提交的数据放置在HTTP包的包体中，地址栏不会看到数据。
3.常见问题
既然有如此多种页⾯传参的⽅式。那么问题来就来了，在什么情况下，适合使⽤以上介绍的传递⽅式呢？
4.解决⽅案
在传递少量不涉及隐私的参数时可以使⽤直接url或者Form的GET⽅式传递，⼤量数据可以⽤POST传递
会话信息等可以⽤cookie和localStorage，临时数据可⽤sessionStorage
5.编码实战
6.扩展思考
传参⽅式的优缺点
6.1、URL传参：
优点：取值⽅便，可以跨域。
缺点：值长度有限制。
6.2、H5 Web storage：
优点：使⽤起来⾮常简单、⽅便。
缺点：兼容性有点⼩问题。兼容性： 现代浏览器（firefox safari chrome opera）都⽀持，IE8以下（不包括IE8）不⽀持。
6.3、Cookie传参：
优点：兼容性最好，可以在同源内的任意⽹页内访问，⽣命期可以设置。
缺点：值长度有限制（存储的容量⼩），还得注意请求接⼝时别带到http head。
7.参考⽂献
参考⼀：
参考⼆：
参考⼆：
8.更多讨论
1、按值传参的值是什么值？
（形式参数类型是基本数据类型)：
⽅法调⽤时，实际参数把它的值传递给对应的形式参数，
形式参数只是⽤实际参数的值初始化⾃⼰的存储单元内容，
是两个不同的存储单元，所以⽅法执⾏中形式参数值的改变不影响实际参数的值。
2、引⽤传递是什么意思？
（形式参数类型是引⽤数据类型参数）：也称为传地址。
⽅法调⽤时，实际参数是对象(或数组)，
这时实际参数与形式参数指向同⼀个地址，
在⽅法执⾏中，对形式参数的操作实际上就是对实际参数的操作，
这个结果在⽅法结束后被保留了下来，所以⽅法执⾏中形式参数的改变将会影响实际参数。
3、哪种情况下适合⽤sessionStorage传参？
会话信息等可以⽤cookie和localStorage，可以永久保存（不过只有5M）。临时数据可⽤sessionStorage，不过当会话结束后数据也随之销毁。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。