快捷導(dǎo)航

Javascript中Cookie的獲取和保存應(yīng)用案例

更新時(shí)間：2023年09月18日 08:28:01 作者：馮大少

這篇文章主要給大家介紹了關(guān)于Javascript中Cookie的獲取和保存應(yīng)用的相關(guān)資料,Cookie是直接存儲(chǔ)在瀏覽器中的一小串?dāng)?shù)據(jù),文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下

在之前的博客介紹了如何利用 Selenium去搭建 cookie池，進(jìn)行自動(dòng)化登錄、獲取信息等。那什么是cookie呢？它的作用又是什么呢？這里，再重復(fù)簡單介紹一下。

cookie 是瀏覽器儲(chǔ)存在用戶電腦上的一小段文本文件。該文件里存了加密后的用戶信息，過期時(shí)間等，且每次請(qǐng)求都會(huì)帶上 cookie。用戶在下次訪問的時(shí)候，就會(huì)把本地的cookie文件加上url一起發(fā)送給服務(wù)器，服務(wù)器以此來判斷用戶的狀態(tài)。由于cookie容量有限，只有4kb，有時(shí)候不可能將所有的用戶信息都存到里面，因此 session可以解決這個(gè)問題，服務(wù)器通過身份信息在 session中查詢用戶的其他信息，這樣我們的所有操作都會(huì)被保留。以下舉一個(gè)例子演示怎樣設(shè)置session。

import requests
session = requests.Session()
headers = {
  'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36'
}
// 設(shè)置 session 的全局 headers
session.headers.update(headers)
// 默認(rèn)使用全局的 headers
session.get('https://passport.vip.com/')
//自定義 headers
custom_headers = { 'referer': 'https://passport.vip.com/' }
// 既有全局的 user-agent 也有自定義的 referer
session.get('https://passport.vip.com/', headers=custom_headers)

在講解Cookie的獲取和保存應(yīng)用前，簡單介紹一下 cookie在瀏覽器的基本結(jié)構(gòu)組成。

可見，主要組成部分為 Name-Value 鍵值對(duì) 和 Expires 這個(gè)生命周期，也就是失效的時(shí)間。

獲取 cookie : 通過 Document 對(duì)象 document.cookie創(chuàng)建和讀取后，以分號(hào) ; split 成一個(gè)數(shù)組，再通過 for 循環(huán)，添加判斷條件，當(dāng)查找到對(duì)應(yīng)的 name 后，返回對(duì)應(yīng)的用戶名。如果找不到，返回空值。

function getCookie(cname) {
  var name = cname + '=';
  var ca = document.cookie.split(';'); 
  for (var i = 0; i < ca.length; i++) {
      if (ca[i].indexOf(name) >= 0) {
         return ca[i].split('=')[1];
          }
        }
        return '';
  }

保存、設(shè)置 cookie ：創(chuàng)建一個(gè)標(biāo)準(zhǔn)的中國時(shí)間對(duì)象，再通過 setTime() 方法，設(shè)置cookie的生命周期，其中 getTime() 就是把時(shí)間對(duì)象轉(zhuǎn)變成格林威治的時(shí)間戳（單位為毫秒），最后把時(shí)間戳通過 toGMTString()方法轉(zhuǎn)成 GMT的標(biāo)準(zhǔn)時(shí)間。

function setCookie(cname, cvalue, exdays) {
   var d = new Date();
   d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
   var expires = 'expires=' + d.toGMTString();
   document.cookie = cname + '=' + cvalue + ';' + expires;
}

校檢 cookie ：通過回調(diào)函數(shù) getCookie() 和 setCookie() ，添加判斷條件，當(dāng)檢測到 Local cookie，就會(huì)自動(dòng)彈出歡迎的提示框，否則就要輸入用戶名，保存到 cookie里。

function checkCookie() {
   var user = getCookie('username');
   if (user) {
      alert('歡迎 ' + user + ' 再次訪問');
        } else {
          user = prompt('請(qǐng)輸入你的名字:');
          if (user) {
            setCookie('username', user, 8);
          }
        }
      }

最后，通過 window.onload 頁面加載后，執(zhí)行回調(diào)函數(shù) checkCookie()

    window.onload = function () {
       checkCookie();
      };

完整的代碼如下：

<script>
 window.onload = function () {
        checkCookie();
      };
 function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
    var expires = 'expires=' + d.toGMTString();
    document.cookie = cname + '=' + cvalue + ';' + expires;
      }
 function getCookie(cname) {
    var name = cname + '=';
    var ca = document.cookie.split(';'); 
    for (var i = 0; i < ca.length; i++) {
       if (ca[i].indexOf(name) >= 0) {
          return ca[i].split('=')[1];
          }
        }
    return '';
      }
 function checkCookie() {
    var user = getCookie('username');
       if (user) {
         alert('歡迎 ' + user + ' 再次訪問');
        } else {
          user = prompt('請(qǐng)輸入你的名字:');
          if (user) {
            setCookie('username', user, 8);
          }
        }
      }
</script>

測試演示：例如當(dāng)首次登錄界面后，輸入用戶名

可見，剛才測試輸入的用戶名以及 Expires 都成功添加到 cookies，用戶有效的生命周期為 8天，那就是剛才函數(shù) setCookie() 里面的第3個(gè)參數(shù)。

在不刪除 cookie的情況下，把瀏覽器關(guān)掉，再重新打開時(shí)，由于系統(tǒng)檢測到本地 cookie 有相對(duì)應(yīng)的用戶名，因此會(huì)自動(dòng)執(zhí)行 checkCookie() 里的 alert() 函數(shù)內(nèi)容，那就是彈窗語句。