cookie (瀏覽器緩存)


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM