頁(yè)面間固定參數(shù),通過(guò)cookie傳值的實(shí)現(xiàn)方法
最后在做的頁(yè)面,比如用戶數(shù)據(jù)(用戶頭像,名稱,年齡)這些信息,因?yàn)榇蟛糠猪?yè)面都要用,之前是通過(guò)url地址傳,另一頁(yè)面接收??紤]到這樣做會(huì)讓url過(guò)長(zhǎng),因此,嘗試使用cookie,把固定的值保存在cookie,其它頁(yè)面拿出來(lái)就可以使用。
在此之前,先寫通過(guò)url傳值與取值的過(guò)程。url通過(guò)跳轉(zhuǎn)頁(yè)面,給跳轉(zhuǎn)頁(yè)的url問(wèn)號(hào)后拼接參數(shù)的方法傳值:
//問(wèn)號(hào)后的userId / dialogId都是要傳的參數(shù) //如果有多個(gè)參數(shù),就用“&”拼接 window.location.href = 'doctor_ask.html?userId=' + userId + "&dialogId=" + dialogId;
在doctor_ask.html頁(yè)面,把在url中的參數(shù)取下來(lái),要使用一個(gè)方法getQueryString(),其中有一個(gè)方法是用來(lái)獲取url中含有中文參數(shù)的:
/* 獲取url后的某一個(gè)query的值 */ function getQueryString( name ) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); //獲取url中"?"符后的字符串并正則匹配 var context = ""; if (r != null) context = r[2]; reg = null; r = null; return context == null || context == "" || context == "undefined" ? "" : context; } //獲取Url中中文參數(shù)的方法 function getQueryUrlString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); var r = window.location.search.substr(1).match(reg); if(r != null) { return decodeURI(r[2]); } return "請(qǐng)選擇"; }
使用方法獲取參數(shù):
//調(diào)用方法獲取參數(shù),方法中的參數(shù)名是一個(gè)字符串 var userId = getQueryString('userId')
第二種,通過(guò)cookie方法傳值,我這里使用的是jQuery cookie,因此需要先加載jQuery與cookie:
<!--使用cookie--> <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script src="http://code.changer.hk/jquery/plugins/jquery.cookie.js"></script>
在其中一個(gè)頁(yè)面,比如首頁(yè),將要保存的值存放在cookie.
如果僅是一個(gè)id,直接使用鍵值對(duì)的方法保存即可:
//將id保存在cookie $.cookie('doctorId', '11916111-f2eb-11e4-b756-f40669963d49'); //從cookie中取出id var doctorId = $.cookie('doctorId');
如果是多個(gè)值,需要將多個(gè)值放在對(duì)象中,保存這個(gè)對(duì)象:
//將多個(gè)值存放在對(duì)象中 var userData = { userId: "11916122-f2eb-11e4-b756-f40669963d49", patientName: "張麗", patientAge: 23, patientSex: "F" } //將這個(gè)對(duì)象保存在cookie,它的鍵是對(duì)象名稱,值為JSON.stirng(),目的是將這個(gè)對(duì)象解析為字符串,因?yàn)閏ookie的鍵與值都是字符串 $.cookie('userData' , JSON.stringify(userData));
如果在其它頁(yè)面使用這個(gè)cookie中對(duì)象,可以取出這個(gè)對(duì)象并將對(duì)象轉(zhuǎn)換為字符串
var userData = $.cookie('userData'); if(userData){ //JSON.parse() 將字符串解析為對(duì)象,方便使用 userData = JSON.parse(userData); };
兩個(gè)知識(shí)點(diǎn):
//字符串解析為對(duì)象 JSON.parse(對(duì)象名稱); //對(duì)象解析為字符串 JSON.stringify(對(duì)象名稱);
以上這篇頁(yè)面間固定參數(shù),通過(guò)cookie傳值的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
解決js圖片加載時(shí)出現(xiàn)404的問(wèn)題
這篇文章主要為大家詳細(xì)介紹了解決js圖片加載時(shí)出現(xiàn)404問(wèn)題的方法,具有一定的參考價(jià)值,這方面有困惑的朋友可以參考一下2015-11-11JS自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用(兩種場(chǎng)景)
在WEB程序開(kāi)發(fā)中經(jīng)常會(huì)見(jiàn)到用倒計(jì)時(shí)限制用戶對(duì)表單的操作,希望用戶在規(guī)定的時(shí)間內(nèi)閱讀完協(xié)議信息才允許用戶繼續(xù)下一步操作,本文通過(guò)兩種場(chǎng)景分析js實(shí)現(xiàn)自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用,小伙伴快來(lái)學(xué)習(xí)吧2015-08-08js創(chuàng)建數(shù)據(jù)共享接口——簡(jiǎn)化框架之間相互傳值
很多框架存在父子關(guān)系,操作起來(lái)十分麻煩,很多同學(xué)經(jīng)常出現(xiàn)這樣悲催的代碼2011-10-10技術(shù)男用來(lái)對(duì)妹子表白的百度首頁(yè)
這篇文章主要介紹了技術(shù)男用來(lái)對(duì)妹子表白的百度首頁(yè),非常有創(chuàng)意、有意思,需要的朋友可以參考下2014-07-07javascript中Date對(duì)象的使用總結(jié)
本文介紹了Date對(duì)象的使用方法,清晰明了,實(shí)現(xiàn)方法有多種,僅供大家參考,希望對(duì)大家有所幫助,下面就跟小編一起來(lái)看看吧2016-11-11淺談Javascript中substr和substring的區(qū)別
這篇文章主要介紹了Javascript中substr和substring的區(qū)別,非常的簡(jiǎn)單明了,有需要的小伙伴可以來(lái)仔細(xì)看看。2015-09-09JavaScript獲取并更改input標(biāo)簽name屬性的方法
這篇文章主要介紹了JavaScript獲取并更改input標(biāo)簽name屬性的方法,涉及javascript針對(duì)表單元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07