大家好，我是IT修真院深圳分院第01期學(xué)員，一枚正直善良的web程序員。
今天給大家分享一下，修真院官網(wǎng) JS任務(wù)中可能會(huì)使用到的知識(shí)點(diǎn)：
js有哪幾種傳參方式？
1.背景介紹
所有函數(shù)的參數(shù)都是按值傳遞的,也就是說(shuō)把函數(shù)外部的值賦值給函數(shù)內(nèi)部的參數(shù)，就和把值從一個(gè)變量賦值到另一個(gè)變量一樣。
————《js高級(jí)程序設(shè)計(jì)》
有的人可能會(huì)把這里的js傳參方式，理解成js函數(shù)中的參數(shù)傳遞，但是呢，我們所要講的是頁(yè)面之間的數(shù)據(jù)傳遞。
傳統(tǒng)的前端開(kāi)發(fā)中，頁(yè)面之間是少有參數(shù)交互的，甚至沒(méi)有，而在如今的前端環(huán)境下， 一個(gè)稍微正式點(diǎn)的項(xiàng)目都不可能少了頁(yè)面間傳參，頁(yè)面的跨越、服務(wù)器后臺(tái)進(jìn)行數(shù)據(jù)請(qǐng)求等，都需要一個(gè)或多個(gè)傳參的方法。 那么參數(shù)在不同的頁(yè)面間進(jìn)行傳遞，一個(gè)頁(yè)面的參數(shù)被另一頁(yè)面使用，如何才能做到不同頁(yè)面間進(jìn)行參數(shù)傳遞？
在JS中有多種頁(yè)面?zhèn)鬟f參數(shù)的方法：
一、URL
把參數(shù)值附在url后面?zhèn)鬟f到其他頁(yè)面
二、H5 web storage
localStroage 和 sessionStorage
三、Cookie
使用瀏覽器Cookie傳遞參數(shù)
四、Form 表單
Form表單通過(guò)URL傳遞參數(shù)
2.知識(shí)剖析
2.1、URL
A. URL地址傳遞參數(shù)
把參數(shù)值附在url后面?zhèn)鬟f到其他頁(yè)面
如：http://xxx.com/login.html?user=lol&pwd=66666
其中“user=lol”和“pwd=66666”就是我們傳遞的參數(shù)名稱和值。
url和參數(shù)之間用"?"隔開(kāi)，多個(gè)參數(shù)之間用"&"符號(hào)連接。
URL地址傳遞參數(shù)的幾個(gè)特點(diǎn)：
優(yōu)點(diǎn)：
1、 URL地址法簡(jiǎn)潔易用，可同時(shí)傳遞多個(gè)字符型參數(shù)；
2、 URL地址法可以很方便的在頁(yè)面之間切換并傳遞參數(shù)，無(wú)需額外的處理，基于正常情況比較不會(huì)性能損失；
不足：
3、 URL傳遞參數(shù)長(zhǎng)度受限，最大為2K；
4、 URL只能傳遞字符型參數(shù)，傳遞中文時(shí)，由于發(fā)送頁(yè)面和接收頁(yè)面的字符編碼方式不一樣而導(dǎo)致參數(shù)解析處理錯(cuò)誤，參數(shù)包含中文時(shí)可能出現(xiàn)亂碼或者參數(shù)接收錯(cuò)誤；
5、 信息泄露：URL地址在客戶端可見(jiàn)，所以涉及隱私的參數(shù)需進(jìn)行加密后才能進(jìn)行傳遞，不加密傳輸會(huì)導(dǎo)致信息泄露，產(chǎn)生安全隱患。
2.2、H5 WEB STORAGE
1、sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。
例子：菜鳥教程
2、localStorage HTML5本地存儲(chǔ)web storage特性的API之一，用于將大量數(shù)據(jù)（最大5M）保存在瀏覽器中
.?保存后數(shù)據(jù)永遠(yuǎn)存在不會(huì)失效過(guò)期，除非手動(dòng)清除。
.?不參與網(wǎng)絡(luò)傳輸。
.?一般用于性能優(yōu)化，可以保存圖片、js、css、html 模板、大量數(shù)據(jù)。
3、數(shù)據(jù)以 鍵/值 （key/value）對(duì)存在, web網(wǎng)頁(yè)的數(shù)據(jù)只允許該域訪問(wèn)使用
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ù)儲(chǔ)存：
在有多組數(shù)據(jù)需要儲(chǔ)存時(shí)，一般:
.建立一個(gè)新的對(duì)象，然后將多組數(shù)據(jù)儲(chǔ)存在對(duì)象中，
.使用 JSON.stringify() 來(lái)將對(duì)象轉(zhuǎn)換為字符串，
.使用localStorage.setItem(key,value);保存數(shù)據(jù)。
6、數(shù)據(jù)提?。?/p>
.使用localStorage.getItem(key)讀取數(shù)據(jù)
. 使用 JSON.parse 方法將字符串轉(zhuǎn)換為 JSON 對(duì)象。
. 直接引用對(duì)象的各個(gè)值。
例子：菜鳥教程
2.3、COOKIE
Cookie是什么
Cookie是當(dāng)你瀏覽某網(wǎng)站時(shí)，網(wǎng)站存儲(chǔ)在你機(jī)器上的一個(gè)小文本文件， 它記錄了你的用戶ID，密碼、瀏覽過(guò)的網(wǎng)頁(yè)、停留的時(shí)間等信息，當(dāng)你再次來(lái)到該網(wǎng)站時(shí)， 網(wǎng)站通過(guò)讀取Cookie，得知你的相關(guān)信息，就可以做出相應(yīng)的動(dòng)作，如在頁(yè)面顯示歡迎你的標(biāo)語(yǔ)， 或者讓你不用輸入ID、密碼就直接登錄等等
Cookie一般有兩個(gè)作用。
第一個(gè)作用是識(shí)別用戶身份。
比如用戶 A 用瀏覽器訪問(wèn)了 http://a.com，那么 http://a.com 的服務(wù)器就會(huì)立刻給 A 返回一段數(shù)據(jù)「uid=1」（這就是Cookie）。當(dāng) A 再次訪問(wèn) http://a.com 的其他頁(yè)面時(shí)，就會(huì)附帶上「uid=1」這段數(shù)據(jù)。
同理，用戶 B 用瀏覽器訪問(wèn) http://a.com 時(shí)，http://a.com 發(fā)現(xiàn) B 沒(méi)有附帶 uid 數(shù)據(jù)，就給 B 分配了一個(gè)新的 uid，為2，然后返回給 B 一段數(shù)據(jù)「uid=2」。B 之后訪問(wèn) http://a.com 的時(shí)候，就會(huì)一直帶上「uid=2」這段數(shù)據(jù)。
借此，http://a.com 的服務(wù)器就能區(qū)分 A 和 B 兩個(gè)用戶了。
第二個(gè)作用是記錄歷史。
假設(shè) http://a.com 是一個(gè)購(gòu)物網(wǎng)站，當(dāng) A 在上面將商品 A1 、A2 加入購(gòu)物車時(shí)，JS 可以改寫 Cookie，改為「uid=1; cart=A1,A2」，表示購(gòu)物車?yán)镉?A1 和 A2 兩樣商品了。
這樣一來(lái)，當(dāng)用戶關(guān)閉網(wǎng)頁(yè)，過(guò)三天再打開(kāi)網(wǎng)頁(yè)的時(shí)候，依然可以看到 A1、A2 躺在購(gòu)物車?yán)铮驗(yàn)闉g覽器并不會(huì)無(wú)緣無(wú)故地刪除這個(gè)Cookie。
借此，就達(dá)到里記錄用戶操作歷史的目的了。
Cookie的一些特點(diǎn)。
1.Cookie可以使用 js 在瀏覽器直接設(shè)置（用于記錄不敏感信息，如用戶名）, 也可以在服務(wù)端通使用 HTTP 協(xié)議規(guī)定的set-cookie來(lái)讓瀏覽器種下Cookie，這是最常見(jiàn)的做法。
2.每次網(wǎng)絡(luò)請(qǐng)求 Request headers 中都會(huì)帶上Cookie。所以如果Cookie太多太大對(duì)傳輸效率會(huì)有影響。
3.一般瀏覽器存儲(chǔ)Cookie最大容量為4k，所以大量數(shù)據(jù)不要存到Cookie。
2.4、FORM 表單
Form表單傳值也是通過(guò)URL傳遞參數(shù)
通常使用的表單的提交方式主要是：
post和get兩種。
兩者的區(qū)別在于：post方式是把數(shù)據(jù)內(nèi)容放在請(qǐng)求的數(shù)據(jù)正文部分，沒(méi)有長(zhǎng)度的限制;
get方式則是把數(shù)據(jù)內(nèi)容直接跟在請(qǐng)求的頭部的URL后面，有長(zhǎng)度的限制。
而一般在表單的數(shù)據(jù)提交中，都會(huì)選擇POST方式，
因?yàn)槭褂肎ET方法數(shù)據(jù)是通過(guò)URL傳遞的，在地址欄中會(huì)直接看到傳遞的數(shù)據(jù)，這樣就缺少安全性。
而使用POST傳遞時(shí)，是把提交的數(shù)據(jù)放置在HTTP包的包體中，地址欄不會(huì)看到數(shù)據(jù)。
3.常見(jiàn)問(wèn)題
既然有如此多種頁(yè)面?zhèn)鲄⒌姆绞健Ｄ敲磫?wèn)題來(lái)就來(lái)了，在什么情況下，適合使用以上介紹的傳遞方式呢？
4.解決方案
在傳遞少量不涉及隱私的參數(shù)時(shí)可以使用直接url或者Form的GET方式傳遞，大量數(shù)據(jù)可以用POST傳遞
會(huì)話信息等可以用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)：值長(zhǎng)度有限制。
6.2、H5 Web storage：
優(yōu)點(diǎn)：使用起來(lái)非常簡(jiǎn)單、方便。
缺點(diǎn)：兼容性有點(diǎn)小問(wèn)題。兼容性： 現(xiàn)代瀏覽器（firefox safari chrome opera）都支持，IE8以下（不包括IE8）不支持。
6.3、Cookie傳參：
優(yōu)點(diǎn)：兼容性最好，可以在同源內(nèi)的任意網(wǎng)頁(yè)內(nèi)訪問(wèn)，生命期可以設(shè)置。
缺點(diǎn)：值長(zhǎng)度有限制（存儲(chǔ)的容量小），還得注意請(qǐng)求接口時(shí)別帶到http head。
