JS有哪幾種傳參方式?

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【JS有哪幾種傳參方式?】

（1）背景介紹：

js中的傳值方式，對於簡單類型（好比字符串和數值）就是值傳遞和引用傳遞。可是HTML頁面之間如何傳遞數據？

若是是動態頁面，根本就不須要考慮這個問題，能夠若是是一個純HTML+JavaScript的應用，

沒法使用數據庫等操做，沒有保存數據，光依靠前端的手段該如何實現頁面之間的傳遞數據和參數呢？

 

（2）知識剖析：

第一種常見的是經過url傳值，

主要原理是：經過GET方法而後獲取URL從中解析出傳遞的數據

//獲取到的url值是以"?"開頭的url

var deocdeURL = decodeURI(location.search);//解碼url

//封裝的解析url的方法

function doClickfamg(){

var pureURL = deocdeURL.split("?")[1];//獲取"?"之後的參數

var valuesArray = pureURL.split("&");

var url_Object = new Object();

for(var i = 0;i< valuesArray.length;i++){

var key_value = valuesArray[i].split("=");

//動態給對象添加key和value

//是以傳遞過來的key和value做爲解析後的新的對象的key和value

url_Object[key_value[0]] = key_value[1];

}

return url_Object;//返回對象

}

 

獲取url傳的值

//調用解析方法

var mydecodeURI = doClickfamg();

//好比我要知道傳遞的key2的value是什麼

alert(mydecodeURI.key2);

 

優缺點

優勢

1.URL地址法簡潔易用可同時傳遞多個字符型參數；

2.URL地址法能夠很方便的在頁面之間切換並傳遞參數，無需額外的處理，基於正常狀況比較不會性能損失；

不足：

3.URL傳遞參數長度受限，最大爲2K；

4.URL只能傳遞字符型參數，傳遞中文時因爲發送頁面和接收頁面的字符編碼方式不同而致使參數解析處理錯誤，參數包含中文時可能出現亂碼或者參數接收錯誤；

5.URL地址在客戶端可見，因此涉及隱私的參數需進行加密後才能進行傳遞，不加密傳輸會致使信息泄露，產生安全隱患。

 

2.三、Cookie

Cookie 是一些數據, 存儲於你電腦上的文本文件中。

當 web 服務器向瀏覽器發送 web 頁面時，在鏈接關閉後，服務端不會記錄用戶的信息。

Cookie 的做用就是用於解決 "如何記錄客戶端的用戶信息":

當用戶訪問 web 頁面時，他的名字能夠記錄在 cookie 中。

在用戶下一次訪問該頁面時，能夠在 cookie 中讀取用戶訪問記錄。

Cookie 以名/值對形式存儲

 

Cookie原理和特色

1.第一次訪問網站的時候，瀏覽器發出請求，服務器響應請求後，會將cookie放入到響應請求中，

在瀏覽器第二次發請求的時候，會把cookie帶過去，服務端會辨別用戶身份，固然服務器也能夠修改cookie內容

2.cookie 是有大小限制的，每一個 cookie 所存放的數據不能超過4kb，若是 cookie 字符串的長度超過4kb，則該屬性將返回空字符串。

3.因爲 cookie 最終都是以文件形式存放在客戶端計算機中，因此查看和修改 cookie 都是很方便的，這就是爲何常說 cookie 不能存放重要信息的緣由。

4.一個 cookie 的生命週期就是在瀏覽器關閉的時候結束。想要 cookie 能在瀏覽器關掉以後使用，就要爲 cookie 設置有效期

 

在js中操做cookie

document.cookie = "userName = mike";

還能夠在cookie中添加過時時間，默認在瀏覽器關閉時刪除cookie

document.cookie = "userName = mike expires = Mon,14 Oct 2018 12:00:00 GMT";

讀取cookie

let data = document.cookie;

 

2.二、H5 web storage

存儲有效期

localStorage

永久性。除非WEB應用刻意刪除存儲的數據，或者用戶經過設置瀏覽器配置來刪除，不然數據會一直保留在用戶電腦上，永不過時。

實際上，localStorage的數據是寫入磁盤中，每次讀取數據時，其實是從硬盤驅動器上讀取這些字節。

sessionStorage

窗口或標籤頁被永久關閉，則經過sessionStorage存儲的數據也被刪除。

 

經常使用操做

localStorage.setItem("x",1);//以"x"的名字存儲一個數值

localStorage.x = 1;//直接向 Web 存儲對象添加鍵/值對

 

localStorage.getItem("x");//獲取數值

localStorage.x;//直接從 Web 存儲對象中檢索鍵/值對

 

localStorage.removeItem("x");//刪除「x」項。

//removeItem是惟一通用的能刪除單個名值對的方式。（由於IE8不支持delete操做符）

localStorage.clear();//所有刪除。惟一能刪除存儲對象中全部名值對的方式

 

//將一個數組存儲爲字符串

var myArray = new Array('First Name', 'Last Name', 'Email Address');

localStorage.formData = JSON.stringify(myArray);

 

//檢索數組的字符串版本並將它轉換成一個可用的 JavaScript 數組

var myArray = JSON.parse(localStorage.formData);

 

（3）常見問題：

這幾種頁面傳參方式選用哪一種比較好

 

（4）解決方案：

根據頁面功能來選擇比較好，好比像登陸頁，就可使用ajax或者angular 經過URL來傳遞參數進行頁面驗證。

localStoragesessionStorage則能夠在像任務2-4上這種頁面上使用，

而cookie的用途就是解決"如何記錄客戶端的用戶信息"，在須要存儲諸如用戶名，搜索歷史等數據時即可以使用

 

 

（5）拓展思考：

es6中的函數傳參是什麼

對於其餘語言來說，傳參分爲傳值類型和傳引用（指針）類型。若是是傳值，函數內部對於參數的改變不會影響到外部變量或對象；

若是是傳引用（指針），在函數內部作的修改則會對外部的變量和對象形成影響。

從技術層面來說，javascript參數的傳遞方式所有都是傳值類型，當咱們將一個值傳遞到函數內部時，

一個臨時的局部變量會被建立，造成對這個參數的一個拷貝，任何對該值的改變都不會影響原有的外部變量。

 

（7）參考文獻：

參考一

參考2

參考3

 

（8）更多討論：

Q1：localStorage 和sessionStorage的存儲大小？

A1：相比cookie的4k，sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大Q2：爲何要使用cookie
A2：由於HTTP協議是無狀態協議，一旦本次會話結束，客戶端與服務器的鏈接就會關閉，下次須要從新創建鏈接，服務器就沒法跟蹤上次會話了。即用戶A在購物車裏添加了一件商品，下次再次添加商品，服務器沒法判斷是用戶A仍是用戶B在操做，爲了跟蹤會話，須要使用Cookie

Q3：cookie的缺點A3：若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。而且每次你請求一個新的頁面的時候，cookie只要知足做用域和做用路徑，Cookie都會被髮送過去，這樣無形中浪費了帶寬。