发表于： 2017-05-17 23:02:19
1 906
【JS-task3】JS有哪几种传参方式?
小课堂【武汉第172期】
分享人：王峰
1.背景介绍
有的人可能会把js传参理解成js函数中的参数传递，在这里我们所要讲的是通过js实现页面之间的传参。
2.知识剖析
2.1 利用URL地址传递参数
把参数值附在url后面传递到其他页面
http://xxx.com/login.html?mobile=123&pwd=abc 其中“mobile=123”和“pwd=abc”就是我们传递的参数名称和值。
url和参数之间用"?"隔开。多个参数之间用"&"符号连接。
URL地址传递参数的几个特点：
优点：
1.URL地址法简洁易用，可同时传递多个字符型参数；
2.URL地址法可以很方便的在页面之间切换并传递参数，无需额外的处理，基于正常情况比较不会性能损失；
不足：
1.URL传递参数长度受限，最大为2K；
2.URL只能传递字符型参数，传递中文时，由于发送页面和接收页面的字符编码方式不一样而导致参数解析处理错误，参数包含中文时可能出现乱码或者参数接收错误；
3.信息泄露：URL地址在客户端可见，所以涉及隐私的参数需进行加密后才能进行传递，不加密传输会导致信息泄露，产生安全隐患。
2.2 Form 表单传递
Form表单传值也是通过URL传递参数
<form action="b.html" method="get"> //
<input type="text" name="id" value="3" />
<input type="text" name="name" value="abc" />
<input type="submit" value="通过传递参数" />
</form>
跳转至b.com时，url为:b.com?id=3&name=abc。
常用的与服务器进行的交互方式是GET和POST，而一般在表单的数据提交中，都会选择POST方式，因为使用GET方法数据是通过URL传递的，在地址栏中会直接看到传递的数据，这样就缺少安全性。而使用POST传递时，是把提交的数据放置在HTTP包的包体中，地址栏不会看到数据。
2.3 localStroage和sessionStorage
2.3.1sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
2.3.2localStorage HTML5本地存储web storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中
1.保存后数据永远存在不会失效过期，除非手动清除。
2.不参与网络传输。
3.一般用于性能优化，可以保存图片、js、css、html 模板、大量数据。
2.3.3数据以 键/值 （key/value）对存在, web网页的数据只允许该域访问使用
2.3.4不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
2.3.5.数据储存：
在有多组数据需要储存时，一般
1.建立一个新的对象，然后将多组数据储存在对象中，
2.使用 JSON.stringify() 来将对象转换为字符串，
3.使用localStorage.setItem(key,value);保存数据。
2.3.6.数据提取：
1.使用localStorage.getItem(key)读取数据
2. 使用 JSON.parse 方法将字符串转换为 JSON 对象。
3. 直接引用对象的各个值。
2.4 用cookie传递参数
2.4.1.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。<br><br>
借此，就达到里记录用户操作历史的目的了。
cookie的一些特点。
1.cookie可以使用 js 在浏览器直接设置（用于记录不敏感信息，如用户名）, 也可以在服务端通使用 HTTP 协议规定的 set-cookie 来让浏览器种下cookie，这是最常见的做法。
2.每次网络请求 Request headers 中都会带上cookie。所以如果 cookie 太多太大对传输效率会有影响。
3.一般浏览器存储cookie 最大容量为4k，所以大量数据不要存到cookie。
查看当前页面的cookie的方法 ——在控制台用 「document.cookie」。
设置cookie时的参数：
path：表示 cookie 影响到的路径，匹配该路径才发送这个 cookie。
expires 和 maxAge：告诉浏览器 cookie 时候过期，maxAge 是 cookie 多久后过期的相对时间。
不设置这两个选项时会产生 session cookie，session cookie 是 transient 的，当用户关闭浏览器时，就被清除。一般用来保存 session 的 session_id。
secure：当 secure 值为 true 时，cookie 在 HTTP 中是无效，在 HTTPS 中才有效
httpOnly：浏览器不允许脚本操作 document.cookie 去更改 cookie。一般情况下都应该设置这个为 true，这样可以避免被 xss 攻击拿到 cookie。
3.常见问题
在什么情况适合使用以上介绍的传递方式？
4.解决方案
在传递少量不涉及隐私的参数时可以使用直接url或者Form的GET方式传递，大量数据可以用POST传递会话信息等可以用cookie和localStorage,临时数据可用sessionStorage
5.编码实战
6.拓展思考
如何保持页面重载后内容数据不变化？如何实现？在不同设备下又该如何实现？
7.参考文献
参考一：http://www.runoob.com/html/html5-webstorage.html
参考二 https://zhuanlan.zhihu.com/p/22396872?refer=study-fe
参考三 https://zhuanlan.zhihu.com/p/22388743
参考四 http://blog.sina.com.cn/s/blog_74e9b07c0100qcv0.html
8.更多讨论
1.在杀人页面中你们通常用的是哪种方法来实现不同页面下的参数传递
2.url怎么实现加密？
3.sessionStorage和localStorage是否能够储存图片
4.为什么在杀人页面中来回使用sessionStorage(页面反复传值)时会报错？
返回列表
评论