大家好，我是IT修真院鄭州王姣妍，一枚正直、純潔、善良的web程序員。
今天給大家分享一下，修真院官網(wǎng) js任務(wù)中可能會使用到的知識點：
js有哪幾種傳參方式？
一、背景介紹
我們今天講的傳參是指頁面之間的數(shù)據(jù)傳遞。
傳統(tǒng)的前端開發(fā)中，頁面之間是少有參數(shù)交互的，甚至沒有，而在如今的前端環(huán)境下， 一個稍微正式點的項目都不可能少了頁面間傳參，頁面的跨越、服務(wù)器后臺進行數(shù)據(jù)請求等，都需要一個或多個傳參的方法。 那么參數(shù)在不同的頁面間進行傳遞，一個頁面的參數(shù)被另一頁面使用，如何才能做到不同頁面間進行參數(shù)傳遞？
在JS中有多種頁面?zhèn)鬟f參數(shù)的方法：
1、URL
把參數(shù)值附在url后面?zhèn)鬟f到其他頁面
2、H5 web storage
localStroage 和 sessionStorage
3、Cookie
使用瀏覽器Cookie傳遞參數(shù)
4、Form 表單
Form表單通過URL傳遞參數(shù)
二、知識剖析
1、url傳參
把參數(shù)值附在url后面?zhèn)鬟f到其他頁面
如：
http://xxx.com/login.html?user=laozhang&pwd=66666
其中“user=laozhang”和“pwd=66666”就是我們傳遞的參數(shù)名稱和值。
url和參數(shù)之間用"?"隔開
多個參數(shù)之間用"&"符號連接。
URL地址傳遞參數(shù)的幾個特點：
優(yōu)點：
1、 URL地址法簡潔易用，可同時傳遞多個字符型參數(shù)；
2、 URL地址法可以很方便的在頁面之間切換并傳遞參數(shù)，無需額外的處理，基于正常情況比較不會性能損失；
不足：
3、 URL傳遞參數(shù)長度受限，最大為2K；
4、 URL只能傳遞字符型參數(shù)，傳遞中文時，由于發(fā)送頁面和接收頁面的字符編碼方式不一樣而導(dǎo)致參數(shù)解析處理錯誤，參數(shù)包含中文時可能出現(xiàn)亂碼或者參數(shù)接收錯誤；
5、 信息泄露：URL地址在客戶端可見，所以涉及隱私的參數(shù)需進行加密后才能進行傳遞，不加密傳輸會導(dǎo)致信息泄露，產(chǎn)生安全隱患。
2、H5 WEB STORAGE
1、sessionStorage用于本地存儲一個會話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
2、localStorage HTML5本地存儲web storage特性的API之一，用于將大量數(shù)據(jù)（最大5M）保存在瀏覽器中
.?保存后數(shù)據(jù)永遠存在不會失效過期，除非手動清除。
.?不參與網(wǎng)絡(luò)傳輸。
.?一般用于性能優(yōu)化，可以保存圖片、js、css、html 模板、大量數(shù)據(jù)。
保存數(shù)據(jù)：localStorage.setItem(key,value);
讀取數(shù)據(jù)：localStorage.getItem(key);
刪除單個數(shù)據(jù)：localStorage.removeItem(key);
刪除所有數(shù)據(jù)：localStorage.clear();
得到某個索引的key：localStorage.key(index);
3、COOKIE
Cookie是當你瀏覽某網(wǎng)站時，網(wǎng)站存儲在你機器上的一個小文本文件， 它記錄了你的用戶ID，密碼、瀏覽過的網(wǎng)頁、停留的時間等信息，當你再次來到該網(wǎng)站時， 網(wǎng)站通過讀取Cookie，得知你的相關(guān)信息，就可以做出相應(yīng)的動作，如在頁面顯示歡迎你的標語， 或者讓你不用輸入ID、密碼就直接登錄等等
Cookie的一些特點。
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。
Form表單傳值也是通過URL傳遞參數(shù)
跳轉(zhuǎn)至page2.com時，
url為:page2.com?id=laozhang&name=666666
三、常見問題
既然有如此多種頁面?zhèn)鲄⒌姆绞健Ｄ敲磫栴}來就來了，在什么情況下，適合使用以上介紹的傳遞方式呢？
四、解決方案
在傳遞少量不涉及隱私的參數(shù)時可以使用直接url或者Form的GET方式傳遞，大量數(shù)據(jù)可以用POST傳遞
會話信息等可以用cookie和localStorage,臨時數(shù)據(jù)可用sessionStorage
五、編碼實戰(zhàn)
五、編碼實戰(zhàn)
1、url傳參
page1
function? post() {
location.href="page2.html?name=laozhang&age=111";
}
page2獲取
var? ?url=location.search;//獲取url中"?"符后的字串
obj= {};
if(url.indexOf("?") != -1) {//判斷是否有參數(shù)
varstr=url.substr(1);//從第一個字符開始 因獲為第0個是?號 取所有除問號的所有符串
strs=str.split("&");//如果有多個參數(shù) 要用&號分隔再用等號進行分隔）
for(var i=0;i<str.length;i++{
obj[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
}
}
console.log(obj.name);? //laozhang
console.log(obj.age);? ?//11
2、sessionStorage傳參
page1（可以使用setITem（）和getIte（），也可以不用，這里面包含了兩種方法，都可以使用）以下是傳單個參數(shù)
storage傳參
function go() {
location.href="page2.html";
}
sessionStorage.name="jim";
sessionStorage.age="21";
// ? sessionStorage.setItem('name','jim');
// ? ?sessionStorage.setItem('age','21');
這是第二個頁面,sessionStorage傳遞參數(shù)
//讀取
varname=sessionStorage.name;
varage=sessionStorage.age;
//使用getItem()獲取參數(shù)
// ? ?var name = sessionStorage.getItem('name');//取出數(shù)據(jù)
// ? ? var age = sessionStorage.getItem('age');
console.log(name,age);//Jim ?21
傳一個對象，需要使用Json.stringify()和Json.parse()
page1
storage傳參
functiongo() {
location.href="page2.html"
}
varobj= {name:'Jim'};
varstr=JSON.stringify(obj);//把對象轉(zhuǎn)換成json字符串
//存入
sessionStorage.obj=str;
console.log(str);? //{"name","jim"}
page2
這是第二個頁面,sessionStorage傳遞對象
//讀取
str=sessionStorage.obj;
//重新轉(zhuǎn)換為對象
obj=JSON.parse(str);
console.log(obj);//{mame:"jim"}
3、cookie傳參
page1
document.cookie="userId=828";
document.cookie="userName=hulk";
functionsetCookie() {
location.href="page2.html";
}
page2
console.log(document.cookie);//userId=828;userName=hulk
六、參考文獻
參考一：js傳參方式
參考二：理解cookie及其用法
參考三：h5 web storage
七、更多討論
1、為啥需要頁面之間傳參？
在“單機”模式下，只需要使用其本身所建立的變量即可。
顯然，在如今的前端環(huán)境，一個稍微正式點的項目都不太可能是這個情況，
頁面的跨越、服務(wù)器后臺進行數(shù)據(jù)請求等，都需要一個或數(shù)個傳參的方法
現(xiàn)在的前端發(fā)展，幾個靜態(tài)頁面已經(jīng)不能滿足需求了，為了讓頁面之間能夠互動，這是必然的；
2、除了上述的頁面?zhèn)鲄⒎椒ㄍ?，還有哪些方法可以傳參？
Window.open：
優(yōu)點：取值方便，只要window.opener指向父窗口,就可以訪問所有對象，不僅可以訪問值，還可以訪問父窗口的方法.值長度無限制。
缺點：兩窗口要存在著關(guān)系，就是利用window.open打開的窗口，不能跨域。
基于angular的路由傳參，以后會用到暫時還沒理解，有興趣自己去學(xué)吧
3、form傳參用的多嗎？
正常情況下form表單提交會把表單內(nèi)的內(nèi)容提交到后臺，通過post方法把數(shù)據(jù)給后臺，通過get去獲取參數(shù)
八、
PPT鏈接：ppt
視頻鏈接：
今天的分享就到這里啦，歡迎大家點贊、轉(zhuǎn)發(fā)、留言、拍磚~
