Cookie是什么(還有session)?
- cookie 和 session 都是用來儲存一些 瀏覽器用戶的信息, 舉個例子— 當用戶登陸你的網站,在登陸頁面(這個文件為login.html ) 登陸成功后需要跳轉到首頁(index.html) ,然后在首頁加載你的個人信息
- 那么如何把之前登陸頁面的信息傳遞到首頁去呢,這里就用cookie或者session存起來,然后再把這個信息在首頁index.html顯示,只要用戶訪問的是這個網站,那么存在這里面的信息都可以用到。
- 也可以理解成這兩個是一個小數據庫,然后可以在本網站的如何一個頁面儲存信息或者讀取信息,來實現數據的交互。
前期接觸H5的碼友在接觸cookie的時候可能會有茫然,而網上百度的都是JQ引入封裝好的cookie方法,確實JQ是特別方便的,但是這給一些剛剛學JS同學造成困難,那么我們如何利用JS的知識去設置瀏覽器cookie呢?
- 想研究JS原生的碼友可以看下小夜自己封裝的關于cookie設置,刪除,和獲取的方法,而現在還不會用JQ的碼友可以將下面的代碼復制下來直接使用。
//設置Cookie
function setCookie(name,value,lostTime,path) {
//首先判斷用戶傳入參數的個數,至少傳入2個參數
if(arguments.length==2){
document.cookie=name+"="+value;//直接設置
}
else if(arguments.length==3){
varifLp=typeof(arguments[2]);//需要判斷用戶輸入的第三個參數類型
if(ifLp=="number"){
var Cookietime=newDate();
Cookietime.setDate(Cookietime.getDate()+lostTime);
document.cookie=name+'='+value+';expires='+Cookietime;//設置自定義時間的Cookie
}
else{document.cookie=name+"="+value+";path="+arguments[2];//設置自定義地址的Cookie}
}
}
else{
varCookietime=newDate();
Cookietime.setDate(Cookietime.getDate()+lostTime);
document.cookie=name+'='+value+';expires='+Cookietime+";path="+path;//設置全部自定義屬性的Cookie
}
}
//獲取Cookie
function getCookie(name) {
vararr=document.cookie.split('; ');
for(vari=0;i
vararr2=arr[i].split('=');
if(arr2[0] == name ){return arr2[1];}
}
return'';
}
//刪除Cookie
function removeCookie(name,path) {
if(path){
setCookie(name,1,-1,path);
}else{
setCookie(name,1,-1);
}
}
1. 設置cookie
在引入上面代碼的前提下:
setCookie("userName","xiaoye",0,"/");
函數接受四個參數:
- 第一參數:必填,設置cookie的名稱
- 第二參數:必填,設置改名稱下cookie的值(內容)
- 第三參數:選填,設置cookie過期的時間,不填或者填0都為默認,默認瀏覽器關閉時移除
- 第四參數:選填,設置cookie的路徑。(對于初學者可先放一邊)
在只天三個參數的情況下,代碼會自動判斷所寫第三個參數的類型。
2. 獲取cookie
所以說設置了cookie要干嘛,就是在其他頁面需要的時候快速調用。
getCookie("userName");
獲取參數沒搞什么花樣,就是傳入cookie的名稱即可返回改cookie的值(內容)
3. 刪除cookie
removeCookie("userName","/");
所以刪除cookie可以接受一到兩個參數,路徑如果之前沒有設置可以不用傳入。
好了,就是這些了,這是小夜用原生js自己封裝起來的cookie函數,對于高級開發來說肯定是不夠用的,但是目前按小夜的技術水平來說,這個就夠用了哦,歡迎大家批評指正,學習代碼之路永無止境~!