快捷導(dǎo)航

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

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

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

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

cookie 是瀏覽器儲存在用戶電腦上的一小段文本文件。該文件里存了加密后的用戶信息，過期時間等，且每次請求都會帶上 cookie。用戶在下次訪問的時候，就會把本地的cookie文件加上url一起發(fā)送給服務(wù)器，服務(wù)器以此來判斷用戶的狀態(tài)。由于cookie容量有限，只有4kb，有時候不可能將所有的用戶信息都存到里面，因此 session可以解決這個問題，服務(wù)器通過身份信息在 session中查詢用戶的其他信息，這樣我們的所有操作都會被保留。以下舉一個例子演示怎樣設(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 鍵值對和 Expires 這個生命周期，也就是失效的時間。

獲取 cookie : 通過 Document 對象 document.cookie創(chuàng)建和讀取后，以分號 ; split 成一個數(shù)組，再通過 for 循環(huán)，添加判斷條件，當(dāng)查找到對應(yīng)的 name 后，返回對應(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)建一個標(biāo)準(zhǔn)的中國時間對象，再通過 setTime() 方法，設(shè)置cookie的生命周期，其中 getTime() 就是把時間對象轉(zhuǎn)變成格林威治的時間戳（單位為毫秒），最后把時間戳通過 toGMTString()方法轉(zhuǎn)成 GMT的標(biāo)準(zhǔn)時間。

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，就會自動彈出歡迎的提示框，否則就要輸入用戶名，保存到 cookie里。

function checkCookie() {
   var user = getCookie('username');
   if (user) {
      alert('歡迎 ' + user + ' 再次訪問');
        } else {
          user = prompt('請輸入你的名字:');
          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('請輸入你的名字:');
          if (user) {
            setCookie('username', user, 8);
          }
        }
      }
</script>

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