js有哪几种传参方式？
小课堂【北京-web-A组】
分享人：吴昊杰
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
我们今天讲的传参是指页面之间的数据传递。
传统的前端开发中，页面之间是少有参数交互的，甚至没有，而在如今的前端环境下，
一个稍微正式点的项目都不可能少了页面间传参，页面的跨越、服务器后台进行数据请求等，都需要一个或多个传参的方法。
那么参数在不同的页面间进行传递，一个页面的参数被另一页面使用，如何才能做到不同页面间进行参数传递？
在JS中有多种页面传递参数的方法：
一、URL
把参数值附在url后面传递到其他页面
二、H5 web storage
localStroage 和 sessionStorage
三、Cookie
使用浏览器Cookie传递参数
四、Form 表单
Form表单通过URL传递参数
2.知识剖析
2.1、URL传参
把参数值附在url后面传递到其他页面
如：
http://xxx.com/login.html?user=laozhang&pwd=66666
其中 “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);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
5、数据储存：
在有多组数据需要储存时，一般:
.建立一个新的对象，然后将多组数据储存在对象中，
.使用 JSON.stringify() 来将对象转换为字符串，
.使用localStorage.setItem(key,value);保存数据。
6、数据提取：
.使用localStorage.getItem(key)读取数据
. 使用 JSON.parse 方法将字符串转换为 JSON 对象。
. 直接引用对象的各个值。
2.3、Cookie
Cookie是什么
Cookie是当你浏览某网站时，网站存储在你机器上的一个小文本文件，
它记录了你的用户ID，密码、浏览过的网页、停留的时间等信息，当你再次来到该网站时，
网站通过读取Cookie，得知你的相关信息，就可以做出相应的动作，如在页面显示欢迎你的标语，
或者让你不用输入ID、密码就直接登录等等
Cookie一般有两个作用。
第一个作用是识别用户身份。
比如用户 A 用浏览器访问了 http://a.com，那么 http://a.com 的服务器就会立刻给 A 返回一段数据「uid=1」（这就是 Cookie）。当 A
再次访问
http://a.com 的其他页面时，就会附带上「uid=1」这段数据。
同理，用户 B 用浏览器访问 http://a.com 时，http://a.com 发现 B 没有附带 uid 数据，就给 B 分配了一个新的 uid，为2，然后返回给 B
一段数据「uid=2」。B 之后访问 http://a.com 的时候，就会一直带上「uid=2」这段数据。
借此，http://a.com 的服务器就能区分 A 和 B 两个用户了。
第二个作用是记录历史。
假设 http://a.com 是一个购物网站，当 A 在上面将商品 A1 、A2 加入购物车时，JS 可以改写 Cookie，改为「uid=1;
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.com时，
url为: page2.com?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.参考文献
参考一：js传参方式
参考二：理解cookie及其用法
参考二：web Storage
8.更多讨论
一.
二,登录之后如何判断是否已登录
传统方法Cookie-sessin验证,token验证,cookie保存格式和参考说明.
三.为什么要传递参数
为了页面之间能更多的数据交流和互动.
cook引用值的类型可以看下面的资料.
http://jerryzou.com/posts/cookie-and-web-storage/
JS数据按值传递
http://www.cnblogs.com/youxin/p/3354903.html
GIt地址: https://ptteng.github.io/WEB/ppt/js-2sessinStorage.html#/ 可以看这个.
腾讯视频: https://v.qq.com/x/page/u0539jyxgha.html
鸣谢
感谢大家观看
BY : 郭俊伟/王姣妍/吴昊杰
