JavaScript之cookie技術(shù)詳解
運(yùn)用JS設(shè)置cookie、讀取cookie、刪除cookie
JavaScript是運(yùn)行在客戶端的腳本,因此一般是不能夠設(shè)置Session的,因?yàn)镾ession是運(yùn)行在服務(wù)器端的。
而cookie是運(yùn)行在客戶端的,所以可以用JS來設(shè)置cookie.
假設(shè)有這樣一種情況,在某個(gè)用例流程中,由A頁面跳至B頁面,若在A頁面中采用JS用變量temp保存了某一變量的值,在B頁面的時(shí)候,同樣需要使用JS來引用temp的變量值,對(duì)于JS中的全局變量或者靜態(tài)變量的生命周期是有限的,當(dāng)發(fā)生頁面跳轉(zhuǎn)或者頁面關(guān)閉的時(shí)候,這些變量的值會(huì)重新載入,即沒有達(dá)到保存的效果。解決這個(gè)問題的最好的方案是采用cookie來保存該變量的值,那么如何來設(shè)置和讀取cookie呢?
首先需要稍微了解一下cookie的結(jié)構(gòu),簡(jiǎn)單地說:cookie是以鍵值對(duì)的形式保存的,即key=value的格式。各個(gè)cookie之間一般是以“;”分隔。
JS設(shè)置cookie:
假設(shè)在A頁面中要保存變量username的值(“jack”)到cookie中,key值為name,則相應(yīng)的JS代碼為:
document.cookie="name="+username;
JS讀取cookie:
假設(shè)cookie中存儲(chǔ)的內(nèi)容為:name=jack;password=123
則在B頁面中獲取變量username的值的JS代碼如下:
var username=document.cookie.split(";")[0].split("=")[1]; //JS操作cookies方法! //寫cookies function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); } //讀取cookies function getCookie(name) { var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return unescape(arr[2]); else return null; } //刪除cookies function delCookie(name) { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval=getCookie(name); if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString(); } //使用示例 setCookie("name","hayden"); alert(getCookie("name")); //如果需要設(shè)定自定義過期時(shí)間 //那么把上面的setCookie 函數(shù)換成下面兩個(gè)函數(shù)就ok; //程序代碼 function setCookie(name,value,time) { var strsec = getsec(time); var exp = new Date(); exp.setTime(exp.getTime() + strsec*1); document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); } function getsec(str) { alert(str); var str1=str.substring(1,str.length)*1; var str2=str.substring(0,1); if (str2=="s") { return str1*1000; } else if (str2=="h") { return str1*60*60*1000; } else if (str2=="d") { return str1*24*60*60*1000; } }
//這是有設(shè)定過期時(shí)間的使用示例: //s20是代表20秒 //h是指小時(shí),如12小時(shí)則是:h12 //d是天數(shù),30天則:d30 setCookie(“name”,”hayden”,”s20”);
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
淺談Javascript中的函數(shù)、this以及原型
下面小編就為大家?guī)硪黄獪\談Javascript中的函數(shù)、this以及原型。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10input獲取焦點(diǎn)時(shí)底部菜單被頂上來問題的解決辦法
這篇文章主要介紹了解決input獲取焦點(diǎn)時(shí)底部菜單被頂上來問題的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下2017-01-01JavaScript設(shè)計(jì)模式中的觀察者模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式中的觀察者模式,觀察者設(shè)計(jì)模式適用于監(jiān)聽一對(duì)多的操作,例如監(jiān)聽對(duì)象屬性的修改等等,觀察者模式能夠降低代碼耦合度,提升可擴(kuò)展性2022-06-06使用BootStrap實(shí)現(xiàn)懸浮窗口的效果
本文給大家分享使用BootStrap實(shí)現(xiàn)懸浮窗口的效果,神奇的 bootstrap就自帶了這個(gè)功能。所以就用bootstrap的popover插件做了,效果還不錯(cuò),感興趣的朋友參考下吧2016-12-12JavaScript實(shí)現(xiàn)伸縮二級(jí)菜單
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)伸縮二級(jí)菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10JavaScript繼承基礎(chǔ)講解(原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承)
這篇文章主要介紹了JavaScript繼承基礎(chǔ)講解,原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承,需要的朋友可以參考下2014-08-08JavaScript表單驗(yàn)證實(shí)例之驗(yàn)證表單項(xiàng)是否為空
表單驗(yàn)證幾乎在每個(gè)需要注冊(cè)或者是登錄的網(wǎng)站都是必不可少,下面通過本篇文章給大家介紹JavaScript表單驗(yàn)證實(shí)例之驗(yàn)證表單項(xiàng)是否為空,涉及到j(luò)s表單驗(yàn)證實(shí)例相關(guān)知識(shí),對(duì)js表單驗(yàn)證實(shí)例代碼需要的朋友一起學(xué)習(xí)吧2016-01-01