这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【JS有哪几种传参方式?】

（1）背景介绍：

js中的传值方式，对于简单类型（比如字符串和数值）就是值传递和引用传递。但是HTML页面之间如何传递数据？

如果是动态页面，根本就不需要考虑这个问题，可以如果是一个纯HTML+JavaScript的应用，

无法使用数据库等操作，没有保存数据，光依靠前端的手段该如何实现页面之间的传递数据和参数呢？

 

（2）知识剖析：

第一种常见的是通过url传值，

主要原理是：通过GET方法然后获取URL从中解析出传递的数据

//获取到的url值是以"?"开头的url

var deocdeURL = decodeURI(location.seArch);//解码url

//封装的解析URL的方法

function doClickfamg(){

var pureURL = deocdeURL.splIT("?")[1];//获取"?"以后的参数

VAR valuesArray = pureURL.split("&");

var url_Object = new Object();

for(var i = 0;i< valuesArray.length;i++){

var key_value = valuesArray[i].split("=");

//动态给对象添加key和value

//是以传递过来的key和value作为解析后的新的对象的key和value

url_Object[key_value[0]] = key_value[1];

}

return url_Object;//返回对象

}

获取url传的值

//调用解析方法

var mydecodeURI = doClickfamg();

//比如我要知道传递的key2的value是什么

alert(mydecodeURI.key2);

优缺点

优点

1.url地址法简洁易用可同时传递多个字符型参数；

2.URL地址法可以很方便的在页面之间切换并传递参数，无需额外的处理，基于正常情况比较不会性能损失；

不足：

3.URL传递参数长度受限，最大为2K；

4.URL只能传递字符型参数，传递中文时由于发送页面和接收页面的字符编码方式不一样而导致参数解析处理错误，参数包含中文时可能出现乱码或者参数接收错误；

5.URL地址在客户端可见，所以涉及隐私的参数需进行加密后才能进行传递，不加密传输会导致信息泄露，产生安全隐患。

2.3、Cookie

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

当用户访问 web 页面时，他的名字可以记录在 cookie 中。

在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

Cookie 以名/值对形式存储

Cookie原理和特点

1.第一次访问网站的时候，浏览器发出请求，服务器响应请求后，会将cookie放入到响应请求中，

在浏览器第二次发请求的时候，会把cookie带过去，服务端会辨别用户身份，当然服务器也可以修改cookie内容

2.cookie 是有大小限制的，每个 cookie 所存放的数据不能超过4kb，如果 cookie 字符串的长度超过4kb，则该属性将返回空字符串。

3.由于 cookie 最终都是以文件形式存放在客户端计算机中，所以查看和修改 cookie 都是很方便的，这就是为什么常说 cookie 不能存放重要信息的原因。

4.一个 cookie 的生命周期就是在浏览器关闭的时候结束。想要 cookie 能在浏览器关掉之后使用，就要为 cookie 设置有效期

在js中操作cookie

document.cookie = "userName = mike";

还可以在cookie中添加过期时间，默认在浏览器关闭时删除cookie

document.cookie = "userName = mike expires = Mon,14 Oct 2018 12:00:00 GMT";

读取cookie

let data = document.cookie;

2.2、H5 web storage

存储有效期

localStorage

永久性。除非WEB应用刻意删除存储的数据，或者用户通过设置浏览器配置来删除，否则数据会一直保留在用户电脑上，永不过期。

实际上，localStorage的数据是写入磁盘中，每次读取数据时，实际上是从硬盘驱动器上读取这些字节。

sessionStorage

窗口或标签页被永久关闭，则通过sessionStorage存储的数据也被删除。

常用操作

localStorage.setItem("x",1);//以"x"的名字存储一个数值

localStorage.x = 1;//直接向 Web 存储对象添加键/值对

localStorage.getItem("x");//获取数值

localStorage.x;//直接从 Web 存储对象中检索键/值对

localStorage.removeitem("x");//删除“x”项。

//removeItem是唯一通用的能删除单个名值对的方式。（因为IE8不支持delete操作符）

localStorage.clear();//全部删除。唯一能删除存储对象中所有名值对的方式

//将一个数组存储为字符串

var myArray = new Array('First Name', 'Last Name', 'Email Address');

localStorage.formData = JSON.stringify(myArray);

//检索数组的字符串版本并将它转换成一个可用的 JavaScript 数组

var myArray = JSON.parse(localStorage.formData);

（3）常见问题：

这几种页面传参方式选用哪种比较好

（4）解决方案：

根据页面功能来选择比较好，比如像登录页，就可以使用ajax或者Angular 通过URL来传递参数进行页面验证。

localStoragesessionStorage则可以在像任务2-4上这种页面上使用，

而cookie的用途就是解决"如何记录客户端的用户信息"，在需要存储诸如用户名，搜索历史等数据时便可以使用

（5）拓展思考：

es6中的函数传参是什么

对于其他语言来讲，传参分为传值类型和传引用（指针）类型。如果是传值，函数内部对于参数的改变不会影响到外部变量或对象；

如果是传引用（指针），在函数内部做的修改则会对外部的变量和对象造成影响。

从技术层面来讲，javascript参数的传递方式全部都是传值类型，当我们将一个值传递到函数内部时，

一个临时的局部变量会被创建，形成对这个参数的一个拷贝，任何对该值的改变都不会影响原有的外部变量。

（7）参考文献：

参考一

参考2

参考3

（8）更多讨论：

Q1：localStorage 和sessionStorage的存储大小？

A1：相比cookie的4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大Q2：为什么要使用cookie
A2：因为HTTP协议是无状态协议，一旦本次会话结束，客户端与服务器的连接就会关闭，下次需要重新建立连接，服务器就无法跟踪上次会话了。即用户A在购物车里添加了一件商品，下次再次添加商品，服务器无法判断是用户A还是用户B在操作，为了跟踪会话，需要使用Cookie

Q3：cookie的缺点
A3：如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。并且每次你请求一个新的页面的时候，cookie只要满足作用域和作用路径，Cookie都会被发送过去，这样无形中浪费了带宽。