多页面之间传递数据的方法

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

一、把参数值附在url后面传递到其他页面

如：
http://xxx.com/login.html?user=laozhang&pwd=66666
其中 “user=laozhang”和 “pwd=66666”就是我们传递的参数名称和值。
url和参数之间用 “?”隔开
多个参数之间用 “&”符号连接。

URL地址传递参数的几个特点：

优点：

1、 URL地址法简洁易用，可同时传递多个字符型参数；
2、 URL地址法可以很方便的在页面之间切换并传递参数，无需额外的处理，基于正常情况比较不会性能损失；

不足：

1、 URL传递参数长度受限，最大为2K；
2、 URL只能传递字符型参数，传递中文时，由于发送页面和接收页面的字符编码方式不一样而导致参数解析处理错误，参数包含中文时可能出现乱码或者参数接收错误；
3、 信息泄露：URL地址在客户端可见，所以涉及隐私的参数需进行加密后才能进行传递，不加密传输会导致信息泄露，产生安全隐患。

---

二、H5 web storage：localStroage 和 sessionStorage

1、sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

2、localStorage HTML5本地存储web storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中

. 保存后数据永远存在不会失效过期，除非手动清除。
. 不参与网络传输。
. 一般用于性能优化，可以保存图片、js、css、html 模板、大量数据。

3、数据以 键/值 （key/value）对存在, web网页的数据只允许该域访问使用

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

.保存数据：localStorage.setItem(key,value);
.读取数据：localStorage.getItem(key);
.删除单个数据：localStorage.removeItem(key);
.删除所有数据：localStorage.clear();
.得到某个索引的key：localStorage.key(index);

5、数据储存：

在有多组数据需要储存时，一般:
.建立一个新的对象，然后将多组数据储存在对象中，
.使用 JSON.stringify() 来将对象转换为字符串，
.使用localStorage.setItem(key,value);保存数据。

6、数据提取：

.使用localStorage.getItem(key)读取数据
. 使用 JSON.parse 方法将字符串转换为 JSON 对象。
. 直接引用对象的各个值。

优缺点

优点：使用起来非常简单、方便。
缺点：兼容性有点小问题。兼容性： 现代浏览器（firefox safari chrome opera）都支持，IE8以下（不包括IE8）不支持。

---

三、Cookie：使用浏览器Cookie传递参数

Cookie是什么

Cookie是当你浏览某网站时，网站存储在你机器上的一个小文本文件，它记录了你的用户ID，密码、浏览过的网页、停留的时间等信息，当你再次来到该网站时，网站通过读取Cookie，得知你的相关信息，就可以做出相应的动作，如在页面显示欢迎你的标语，或者让你不用输入ID、密码就直接登录等等

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。

优缺点

优点：兼容性最好，可以在同源内的任意网页内访问，生命期可以设置。
缺点：值长度有限制（存储的容量小），还得注意请求接口时别带到http head。

---

四、Form 表单：Form表单通过URL传递参数

例如：
<form action="page2.html" method="get">

    <input type="text"name="user"value="laozhang">

    <input type="text"name="pwd"value="666666">

    <input type="submit"value="通过传递参数">

</form>
跳转至page2.com时，
url为: page2.com?id=laozhang&name=666666

通常使用的表单的提交方式主要是：post和get两种。

两者的区别在于：
post方式是把数据内容放在请求的数据正文部分，没有长度的限制;
get方式则是把数据内容直接跟在请求的头部的URL后面，有长度的限制。
而一般在表单的数据提交中，都会选择POST方式，
因为使用GET方法数据是通过URL传递的，在地址栏中会直接看到传递的数据，这样就缺少安全性。
而使用POST传递时，是把提交的数据放置在HTTP包的包体中，地址栏不会看到数据。