1.背景介紹

我們今天講的傳參是指頁面之間的數(shù)據(jù)傳遞。

傳統(tǒng)的前端開發(fā)中，頁面之間是少有參數(shù)交互的，甚至沒有，而在如今的前端環(huán)境下，

一個(gè)稍微正式點(diǎn)的項(xiàng)目都不可能少了頁面間傳參，頁面的跨越、服務(wù)器后臺進(jìn)行數(shù)據(jù)請求等，都需要一個(gè)或多個(gè)傳參的方法。

那么參數(shù)在不同的頁面間進(jìn)行傳遞，一個(gè)頁面的參數(shù)被另一頁面使用，如何才能做到不同頁面間進(jìn)行參數(shù)傳遞？

在JS中有多種頁面?zhèn)鬟f參數(shù)的方法：

一、URL

把參數(shù)值附在url后面?zhèn)鬟f到其他頁面

二、H5 web storage

localStroage 和 sessionStorage

三、Cookie

使用瀏覽器Cookie傳遞參數(shù)

四、Form 表單

Form表單通過URL傳遞參數(shù)

2.知識剖析

2.1、URL傳參

把參數(shù)值附在url后面?zhèn)鬟f到其他頁面

如：             

http://xxx.com/login.html?user=laozhang&pwd=66666

其中 “user=laozhang”和 “pwd=66666”就是我們傳遞的參數(shù)名稱和值。

url和參數(shù)之間用 "?"隔開

多個(gè)參數(shù)之間用 "&"符號連接。

URL地址傳遞參數(shù)的幾個(gè)特點(diǎn)：

優(yōu)點(diǎn)：

1、 URL地址法簡潔易用，可同時(shí)傳遞多個(gè)字符型參數(shù)；

2、 URL地址法可以很方便的在頁面之間切換并傳遞參數(shù)，無需額外的處理，基于正常情況比較不會性能損失；

不足：

3、 URL傳遞參數(shù)長度受限，最大為2K；

4、 URL只能傳遞字符型參數(shù)，傳遞中文時(shí)，由于發(fā)送頁面和接收頁面的字符編碼方式不一樣而導(dǎo)致參數(shù)解析處理錯(cuò)誤，參數(shù)包含中文時(shí)可能出現(xiàn)亂碼或者參數(shù)接收錯(cuò)誤；

5、 信息泄露：URL地址在客戶端可見，所以涉及隱私的參數(shù)需進(jìn)行加密后才能進(jìn)行傳遞，不加密傳輸會導(dǎo)致信息泄露，產(chǎn)生安全隱患。

2.2、H5 web storage

1、sessionStorage用于本地存儲一個(gè)會話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

2、localStorage HTML5本地存儲web storage特性的API之一，用于將大量數(shù)據(jù)（最大5M）保存在瀏覽器中

. 保存后數(shù)據(jù)永遠(yuǎn)存在不會失效過期，除非手動清除。

. 不參與網(wǎng)絡(luò)傳輸。

. 一般用于性能優(yōu)化，可以保存圖片、js、css、html 模板、大量數(shù)據(jù)。

3、數(shù)據(jù)以 鍵/值 （key/value）對存在, web網(wǎng)頁的數(shù)據(jù)只允許該域訪問使用

4、不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個(gè)（以localStorage為例）：

保存數(shù)據(jù)：localStorage.setItem(key,value);

讀取數(shù)據(jù)：localStorage.getItem(key);

刪除單個(gè)數(shù)據(jù)：localStorage.removeItem(key);

刪除所有數(shù)據(jù)：localStorage.clear();

得到某個(gè)索引的key：localStorage.key(index);

5、數(shù)據(jù)儲存：

在有多組數(shù)據(jù)需要儲存時(shí)，一般:

.建立一個(gè)新的對象，然后將多組數(shù)據(jù)儲存在對象中，

.使用 JSON.stringify() 來將對象轉(zhuǎn)換為字符串，

.使用localStorage.setItem(key,value);保存數(shù)據(jù)。

6、數(shù)據(jù)提?。?/p>

.使用localStorage.getItem(key)讀取數(shù)據(jù)

. 使用 JSON.parse 方法將字符串轉(zhuǎn)換為 JSON 對象。

. 直接引用對象的各個(gè)值。

2.3、Cookie

Cookie是什么

Cookie是當(dāng)你瀏覽某網(wǎng)站時(shí)，網(wǎng)站存儲在你機(jī)器上的一個(gè)小文本文件，

                    它記錄了你的用戶ID，密碼、瀏覽過的網(wǎng)頁、停留的時(shí)間等信息，當(dāng)你再次來到該網(wǎng)站時(shí)，

                    網(wǎng)站通過讀取Cookie，得知你的相關(guān)信息，就可以做出相應(yīng)的動作，如在頁面顯示歡迎你的標(biāo)語，

                    或者讓你不用輸入ID、密碼就直接登錄等等

Cookie一般有兩個(gè)作用。

第一個(gè)作用是識別用戶身份。

比如用戶 A 用瀏覽器訪問了 http://a.com，那么 http://a.com 的服務(wù)器就會立刻給 A 返回一段數(shù)據(jù)「uid=1」（這就是 Cookie）。當(dāng) A

                    再次訪問

                    http://a.com 的其他頁面時(shí)，就會附帶上「uid=1」這段數(shù)據(jù)。

同理，用戶 B 用瀏覽器訪問 http://a.com 時(shí)，http://a.com 發(fā)現(xiàn) B 沒有附帶 uid 數(shù)據(jù)，就給 B 分配了一個(gè)新的 uid，為2，然后返回給 B

                    一段數(shù)據(jù)「uid=2」。B 之后訪問 http://a.com 的時(shí)候，就會一直帶上「uid=2」這段數(shù)據(jù)。

借此，http://a.com 的服務(wù)器就能區(qū)分 A 和 B 兩個(gè)用戶了。

第二個(gè)作用是記錄歷史。

假設(shè) http://a.com 是一個(gè)購物網(wǎng)站，當(dāng) A 在上面將商品 A1 、A2 加入購物車時(shí)，JS 可以改寫 Cookie，改為「uid=1;

                    cart=A1,A2」，表示購物車?yán)镉?A1 和

                    A2 兩樣商品了。

這樣一來，當(dāng)用戶關(guān)閉網(wǎng)頁，過三天再打開網(wǎng)頁的時(shí)候，依然可以看到 A1、A2 躺在購物車?yán)?，因?yàn)闉g覽器并不會無緣無故地刪除這個(gè) Cookie。

借此，就達(dá)到里記錄用戶操作歷史的目的了。

Cookie的一些特點(diǎn)。

1.Cookie可以使用 js 在瀏覽器直接設(shè)置（用于記錄不敏感信息，如用戶名）, 也可以在服務(wù)端通使用 HTTP 協(xié)議規(guī)定的 set-cookie

來讓瀏覽器種下Cookie，這是最常見的做法。

2.每次網(wǎng)絡(luò)請求 Request headers 中都會帶上Cookie。所以如果 Cookie太多太大對傳輸效率會有影響。

3.一般瀏覽器存儲Cookie最大容量為4k，所以大量數(shù)據(jù)不要存到Cookie。

2.4、Form 表單

Form表單傳值也是通過URL傳遞參數(shù)

<form action="page2.html" method="get">

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

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

                    <input type="submit"value="通過傳遞參數(shù)">

                </form>

跳轉(zhuǎn)至page2.com時(shí)，
url為: page2.com?id=laozhang&name=666666

通常使用的表單的提交方式主要是：

post和get兩種。

兩者的區(qū)別在于：post方式是把數(shù)據(jù)內(nèi)容放在請求的數(shù)據(jù)正文部分，沒有長度的限制;

get方式則是把數(shù)據(jù)內(nèi)容直接跟在請求的頭部的URL后面，有長度的限制。

而一般在表單的數(shù)據(jù)提交中，都會選擇POST方式，

因?yàn)槭褂肎ET方法數(shù)據(jù)是通過URL傳遞的，在地址欄中會直接看到傳遞的數(shù)據(jù)，這樣就缺少安全性。

而使用POST傳遞時(shí)，是把提交的數(shù)據(jù)放置在HTTP包的包體中，地址欄不會看到數(shù)據(jù)。

3.常見問題

既然有如此多種頁面?zhèn)鲄⒌姆绞?。那么問題來就來了，在什么情況下，適合使用以上介紹的傳遞方式呢？

4.解決方案

在傳遞少量不涉及隱私的參數(shù)時(shí)可以使用直接url或者Form的GET方式傳遞，大量數(shù)據(jù)可以用POST傳遞

會話信息等可以用cookie和localStorage,臨時(shí)數(shù)據(jù)可用sessionStorage

5.編碼實(shí)戰(zhàn)

6.擴(kuò)展思考

傳參方式的優(yōu)缺點(diǎn)

6.1、URL傳參：

優(yōu)點(diǎn)：取值方便，可以跨域。

缺點(diǎn)：值長度有限制。

6.2、H5 Web storage：

優(yōu)點(diǎn)：使用起來非常簡單、方便。

缺點(diǎn)：兼容性有點(diǎn)小問題。兼容性： 現(xiàn)代瀏覽器（firefox safari chrome opera）都支持，IE8以下（不包括IE8）不支持。

6.3、Cookie傳參：

優(yōu)點(diǎn)：兼容性最好，可以在同源內(nèi)的任意網(wǎng)頁內(nèi)訪問，生命期可以設(shè)置。

缺點(diǎn)：值長度有限制（存儲的容量小），還得注意請求接口時(shí)別帶到http head。

7.參考文獻(xiàn)

參考一：js傳參方式

參考二：理解cookie及其用法

參考二：web Storage

8.更多討論

1、按值傳參的值是什么值？

（形式參數(shù)類型是基本數(shù)據(jù)類型)：
方法調(diào)用時(shí)，實(shí)際參數(shù)把它的值傳遞給對應(yīng)的形式參數(shù)，
形式參數(shù)只是用實(shí)際參數(shù)的值初始化自己的存儲單元內(nèi)容，
是兩個(gè)不同的存儲單元，所以方法執(zhí)行中形式參數(shù)值的改變不影響實(shí)際參數(shù)的值。

2、引用傳遞是什么意思？

（形式參數(shù)類型是引用數(shù)據(jù)類型參數(shù)）：也稱為傳地址。
方法調(diào)用時(shí)，實(shí)際參數(shù)是對象(或數(shù)組)，
這時(shí)實(shí)際參數(shù)與形式參數(shù)指向同一個(gè)地址，
在方法執(zhí)行中，對形式參數(shù)的操作實(shí)際上就是對實(shí)際參數(shù)的操作，
這個(gè)結(jié)果在方法結(jié)束后被保留了下來，所以方法執(zhí)行中形式參數(shù)的改變將會影響實(shí)際參數(shù)。

3、哪種情況下適合用sessionStorage傳參？

會話信息等可以用cookie和localStorage,可以永久保存（不過只有5M）。臨時(shí)數(shù)據(jù)可用sessionStorage，不過當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀。