JS有哪几种传参方式?

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

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

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

【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.三、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.二、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都会被发送过去，这样无形中浪费了带宽。