JS有哪幾種傳參方式
js有哪幾種傳參方式？
小課堂【深圳-web-A組】
目錄
1.背景介紹
2.知識剖析
3.常見問題
4.解決方案
5.編碼實戰
6.擴充套件思考
7.參考文獻
8.更多討論
1.背景介紹
我們今天講的傳參是指頁面之間的資料傳遞。
傳統的前端開發中，頁面之間是少有引數互動的，甚至沒有，而在如今的前端環境下，
一個稍微正式點的專案都不可能少了頁面間傳參，頁面的跨越、伺服器後臺進行資料請求等，都需要一個或多個傳參的方法。
那麼引數在不同的頁面間進行傳遞，一個頁面的引數被另一頁面使用，如何才能做到不同頁面間進行引數傳遞？
在JS中有多種頁面傳遞引數的方法：
一、URL
把引數值附在url後面傳遞到其他頁面
二、H5 web storage
localStroage 和 sessionStorage
三、Cookie
使用瀏覽器Cookie傳遞引數
四、Form 表單
Form表單通過URL傳遞引數
2.知識剖析
2.1、URL傳參
把引數值附在url後面傳遞到其他頁面
如：
http://xxx.com/login.html?user=laowang&pwd=100
其中 “user=laowang”和 “pwd=100”就是我們傳遞的引數名稱和值。
url和引數之間用 "?"隔開
多個引數之間用 "&"符號連線。
URL地址傳遞引數的幾個特點：
優點：
1、 URL地址法簡潔易用，可同時傳遞多個字元型引數；
2、 URL地址法可以很方便的在頁面之間切換並傳遞引數，無需額外的處理，基於正常情況比較效能不會損失；
不足：
3、 URL傳遞引數長度受限，最大為2K；
4、 URL只能傳遞字元型引數，傳遞中文時，由於傳送頁面和接收頁面的字元編碼方式不一樣而導致引數解析處理錯誤，引數包含中文時可能出現亂碼或者引數接收錯誤；
5、 資訊洩露：URL地址在客戶端可見，所以涉及隱私的引數需進行加密後才能進行傳遞，不加密傳輸會導致資訊洩露，產生安全隱患。
2.2、H5 web storage
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 物件。
. 直接引用物件的各個值。
2.3、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。
2.4、Form 表單
Form表單傳值也是通過URL傳遞引數
<form action="demo2.html"method="get">
<input type="text"name="user"value="laowang">
<input type="text"name="pwd"value="666666">
<input type="submit"value="通過傳遞引數">
</form>
跳轉至demo2.com時，
url為: demo2.com?id=laowang&name=666666
通常使用的表單的提交方式主要是：
post和get兩種。
兩者的區別在於：post方式是把資料內容放在請求的資料正文部分，沒有長度的限制;
get方式則是把資料內容直接跟在請求的頭部的URL後面，有長度的限制。
而一般在表單的資料提交中，都會選擇POST方式，
因為使用GET方法資料是通過URL傳遞的，在位址列中會直接看到傳遞的資料，這樣就缺少安全性。
而使用POST傳遞時，是把提交的資料放置在HTTP包的包體中，位址列不會看到資料。
3.常見問題
既然有如此多種頁面傳參的方式。那麼問題來就來了，在什麼情況下，適合使用以上介紹的傳遞方式呢？
什麼是url傳參
什麼是storage
4.解決方案
在傳遞少量不涉及隱私的引數時可以使用直接url或者Form的GET方式傳遞，大量資料可以用POST傳遞會話資訊等可以用cookie和localStorage,臨時資料可用sessionStorage
把引數值附在url後面傳遞到其他頁面
如：
http://xxx.com/login.html?user=laowang&pwd=100
其中 “user=laowang”和 “pwd=100”就是我們傳遞的引數名稱和值。
url和引數之間用 "?"隔開
多個引數之間用 "&"符號連線。
URL地址傳遞引數的幾個特點：
sessionStorage用於本地儲存一個會話（session）中的資料，這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷燬。因此sessionStorage不是一種持久化的本地儲存，僅僅是會話級別的儲存。
localStorage HTML5本地儲存web storage特性的API之一，用於將大量資料（最大5M）儲存在瀏覽器中
. 儲存後資料永遠存在不會失效過期，除非手動清除。
. 不參與網路傳輸。
. 一般用於效能優化，可以儲存圖片、js、css、html 模板、大量資料。
資料以 鍵/值 （key/value）對存在, web網頁的資料只允許該域訪問使用
5.編碼實戰
6.擴充套件思考
傳參方式的優缺點
6.1、URL傳參：
優點：取值方便，可以跨域。
缺點：值長度有限制。
6.2、H5 Web storage：
優點：使用起來非常簡單、方便。
缺點：相容性有點小問題。相容性： 現代瀏覽器（firefox safari chrome opera）都支援，IE8以下（不包括IE8）不支援。
6.3、Cookie傳參：
優點：相容性最好，可以在同源內的任意網頁內訪問，生命期可以設定。
缺點：值長度有限制（儲存的容量小），還得注意請求介面時別帶到http head。
7.參考文獻
8.更多討論
鳴謝