1.背景介绍

我们今天讲的传参是指页面之间的数据传递。

传统的前端开发中，页面之间是少有参数交互的，甚至没有，而在如今的前端环境下， 一个稍微正式点的项目都不可能少了页面间传参，页面的跨越、服务器后台进行数据请求等，都需要一个或多个传参的方法。 那么参数在不同的页面间进行传递，一个页面的参数被另一页面使用，如何才能做到不同页面间进行参数传递？

2.知识剖析

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地址法可以很方便的在页面之间切换并传递参数，无需额外的处理，基于正常情况比较不会性能损失；

不足：

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

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

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

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);

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.扩展思考

各种传参方式的优缺点

URL传参：

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

缺点：值长度有限制。

H5 Web storage：

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

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

Cookie传参：

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

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

7.参考文献

8.更多讨论

感谢大家观看

BY : 刘仁瑞