cookie 其實是個后端技術
指某些網站為了辨別用戶身份、進行 session 跟蹤而儲存在用戶本地終端上的數據(通常是經過加密的)
服務器本身是沒有記錄客戶端身份的方法的。
以前是字字千金,一個域下只能設置幾十個,而現在據說有5M(5兆)
對於前端來說,種cookie就是給document設置了一個叫做cookie的自定義屬性,這個屬性能被所有瀏覽器識別,並緩存在瀏覽器中。
寫(設置)cookie 一定要在服務器環境下運行。
設置 cookie :
document.cookie = key = val
設置 cookie 都會調用 toString
讀取:
document.cookie
返回的結果是把這個域中所有的cookie都顯示出來了。每個key=val 都是以 (分號加空格)分割的
cookie 的默認生命周期是當瀏覽器關閉以后就結束。不過可以通過 expires 去設置生命周期
比如: document.cookie = ' name=xyf2 ' + ' expires= ' + 未來的時間點
哪里會用到cookie ?? :
猜你喜歡、身份驗證、每日推薦、免登陸。。。
cookie的好處:
1.生命周期是可以設置的。而 localStorage 的內容只要不清一直都在。
2.可以把常用的重要的數據緩存起來,減少 http 請求
cookie 的設置、獲取、移除
function getCookie(key){//獲取cookie的時候,會把所有的cookie都獲取出來,並且以分號加空格(; )來划分每一個cookie
let c = document.cookie.split('; ');//獲取到一堆cookie后用分號加空格切一刀
let on = false; for(let i of c){ let arr = i.split('=');//每條數據都有‘name’=‘val’,所以在用(=)切一刀
if(arr[0] === key){ on = true; return arr[1]; } } if(!on)return null; } function setCookie(key,val,obj={}){ let d = new Date(); let {name,time} = obj;//解構賦值
switch(name){ case 'date' : d.setDate(d.getDate() + time);//這行的console 結果是時間戳
break; case 'minu' : d.setMinutes(d.getMinutes() + time); break; case 'hour' : d.setHours(d.getHours() + time); break; } document.cookie = key +'='+ JSON.stringify(val) + (obj.time?'; expires='+ d.toUTCString:'');//拼接cookie //d.toUTCString 時間到了刷新頁面就清除cookie,只用 d 需要關閉頁面再打開才會清除過期的cookie
} // setCookie('age',12);
// setCookie('age',12,{name:'hour',time:5});
// console.log(getCookie('name'));
function rmCookie(key,val){//刪除cookie,也可以直接在控制台中刪,也可以給cookie設置時間,時間到了就會移除
setCookie(key,val,{name:'date',time:-1}); //根據key來得到需要刪除的cookie,將該cookie設置截止時間為負數即可 } let arr = {a:1}; setCookie('name',arr,{name:'date',time:1}); console.log( getCookie('name'));
2018-12-14