这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【 有哪几种传递参数的方法？】
1.背景介绍
《js高级程序设计》上这样叙述参数传递：所有函数的参数都是按值传递的,也就是说把函数外部的值复制给函数内部的参数，就和把值从一个变量复制到另一个变量一样。
详情见:http://www.cnblogs.com/open-wang/p/5208606.html
但在非单页应用中，参数需要在不同的页面间进行传递，一个页面的参数在另一页面无法访问，如何才能做到不同页面间进行参数传递？
2.知识剖析
2.1利用URL地址传递参数
A. URL地址传递参数
把参数值附在url后面传递到其他页面
如：http://xxx.com/login.html?mobile=123&pwd=abc
其中“mobile=123”和“pwd=abc”就是我们传递的参数名称和值。
url和参数之间用"?"隔开
多个参数之间用"&"符号连接。
2.1编码实战
场景：用户登录window.location.href="www.A.com?user=abc&password=123"//A页面传递参数
function getQueryString(name){//取值
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);//["user=abc"，"password=123"]
if (r != null) return unescape(r[2]);
return null;
}
B. URL地址传递参数的几个特点：
优点：
1)URL地址法简洁易用，可同时传递多个字符型参数；
2)URL地址法可以很方便的在页面之间切换并传递参数，无需额外的处理，基于正常情况比较不会性能损失；
不足：
3)URL传递参数长度受限，最大为2K；
4)URL只能传递字符型参数，传递中文时，由于发送页面和接收页面的字符编码方式不一样而导致参数解析处理错误，参数包含中文时可能出现乱码或者参数接收错误；
5)信息泄露：URL地址在客户端可见，所以涉及隐私的参数需进行加密后才能进行传递，不加密传输会导致信息泄露，产生安全隐患。
2.2 Form表单传递
Form表单传值也是通过URL传递参数
跳转至b.com时，url为:b.com?id=3&name=abc
常用的与服务器进行的交互方式是GET和POST，而一般在表单的数据提交中，都会选择POST方式，因为使用GET方法数据是通过URL传递的，在地址栏中会直接看到传递的数据，这样就缺少安全性。而使用POST传递时，是把提交的数据放置在HTTP包的包体中，地址栏不会看到数据
2.3 localStroage和sessionStorage
A.sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
例子：菜鸟教程
B. localStorage HTML5本地存储web storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中
1.保存后数据永远存在不会失效过期，除非手动清除。
2.不参与网络传输。
3.一般用于性能优化，可以保存图片、js、css、html模板、大量数据。
C.数据以 键/值 （key/value）对存在, web网页的数据只允许该域访问使用
D.不管是localStorage，还是sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
E.数据储存：
在有多组数据需要储存时，一般
1.建立一个新的对象，然后将多组数据储存在对象中，
2.使用JSON.stringify()来将对象转换为字符串，
3.使用localStorage.setItem(key,value);保存数据。
F.数据提取：
1.使用localStorage.getItem(key)读取数据
2.使用JSON.parse方法将字符串转换为JSON对象。
3.直接引用对象的各个值。
例子：菜鸟教程
2.4用cookie传递参数
A.Cookie是什么
Cookie是当你浏览某网站时，网站存储在你机器上的一个小文本文件，它记录了你的用户ID，密码、浏览过的网页、停留的时间等信息，当你再次来到该网站时，网站通过读取Cookie，得知你的相关信息，就可以做出相应的动作，如在页面显示欢迎你的标语，或者让你不用输入ID、密码就直接登录等等
B. 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。
3.扩展思考
3.1 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.常见问题
在什么情况适合使用以上介绍的传递方式？
解决方案
在传递少量不涉及隐私的参数时可以使用直接url或者Form的GET方式传递，大量数据可以用POST传递
会话信息等可以用cookie和localStorage,临时数据可用sessionStorage
5.拓展思考
如何保持页面重载后内容数据不变化？如何实现？在不同设备下又该如何实现？
6.参考文献
参考一：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
作者：远望的云
链接：https://www.jianshu.com/p/e9d6b752769c
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地