JS有哪几种传参方式？

1.背景介绍

这里仅对JS页面间、前后端的传参方式作讨论，即页面间、前后端如何进行数据传递。如今越来越多网站的页面间会进行数据的传递，比如我们常见的登录页面，需要将用户名和密码传给后端接口，然后来判断输入是否正确有效。

 

 

2.知识剖析

2.1 URL传递

这种传参方式就是通过在url后面增加参数，然后将参数信息传递到其他页面。比如：http://xxx.com/login.html?user=admin&password=123456

User=admin,password=123456是传递的参数 user\password是名称，admin\123456则是值。在html后面加个？然后添加参数，多个参数则用&相连。后面任务学到的ajax，angularjs都是通过url来传递数据到接口然后接收响应的。

这种传参方式的特点

优点：

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

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

不足：

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

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

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

 

2.2 HTML5 web 存储

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为：

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

 

2.3 COOKIE

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

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

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

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

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

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

JavaScript 中，创建 cookie 如下所示：

document.cookie="username=John Doe";

在 JavaScript 中, 可以使用以下代码来读取 cookie：

var x = document.cookie;

 

 

3.常见问题

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

 

 

4.解决方案

根据页面功能来选择比较好，比如像登录页，就可以使用ajax或者angular 通过URL来传递参数进行页面验证。localStorage\sessionStorage则可以在像任务2-4上这种页面上使用，而cookie的用途就是解决"如何记录客户端的用户信息"，在需要存储诸如用户名，搜索历史等数据时便可以使用

 

 

5.编码实战

 

 

6.扩展思考

各种传参方式的优缺点

6.1、URL传参：

优点：取值方便，可以跨域。

缺点：值长度有限制。

 

6.2、H5 Web storage：

优点：使用起来非常简单、方便。

缺点：兼容性有点小问题。兼容性： 现代浏览器（firefox safari chrome opera）都支持，IE8以下（不包括IE8）不支持。

 

6.3、Cookie传参：

优点：兼容性最好，可以在同源内的任意网页内访问，生命期可以设置。

缺点：值长度有限制（存储的容量小），还得注意请求接口时别带到http head。

 

 

7.参考文献

前端在html页面之间传递参数的方法

https://www.kancloud.cn/digest/yvettelau/137669

HTML5 Web 存储

http://www.runoob.com/html/html5-webstorage.html

JavaScript Cookie

http://www.runoob.com/js/js-cookies.html

 

 

8.更多讨论

1、为什么需要页面之间传参？

在“单机”模式下，只需要使用其本身所建立的变量即可。

显然，在如今的前端环境，一个稍微正式点的项目都不太可能是这个情况，

页面的跨越、服务器后台进行数据请求等，都需要一个或数个传参的方法

现在的前端发展，几个静态页面已经不能满足需求了，为了让页面之间能够互动，这是必然的；

2、如何保持页面重载后内容数据不变化？

可以保存在localStorage或cookie上。不会因为页面的刷新或关闭清空数据。

3、在 javascript 中数据类型可以分为哪两类？

原始数据类型值primitive type，比如Undefined,Null,Boolean,Number,String。

引用类型值，也就是对象类型 Object type,比如Object,Array,Function,Date等。