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