如何理解JavaScript中的cookie

本篇文章給大家分享的是有關如何理解JavaScript中的cookie，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

　　好程序員web前端培訓分享JavaScript學習筆記cookie，cookie 是一個以字符串的形式存儲數據的位置

　　每一個 HTTP 請求都會在請求頭中攜帶 cookie 到服務端

　　每一個 HTTP 響應都會在響應頭中攜帶 cookie 到客戶端

　　也就是說，cookie 是不需要我們手動設置，就會自動在 客戶端 和 服務端之間游走的數據

　　我們只是需要設置一下 cookie 的內容就可以

　　COOKIE 的存儲形式

　　cookie 是以字符串的形式存儲，在字符串中以 key=value 的形式出現

　　每一個 key=value 是一條數據

　　多個數據之間以 ; 分割

// cookie 的形態'a=100; b=200; c=300;'

COOKIE 的特點

00001. 存儲大小有限制，一般是 4 KB 左右

00002. 數量有限制，一般是 50 條左右

00003. 有時效性，也就是有過期時間，一般是 會話級別（也就是瀏覽器關閉就過期了）

00004. 有域名限制，也就是說誰設置的誰才能讀取

使用方式

· 讀取 cookie 的內容使用 document.cookie

const cookie = document.cookieconsole.log(cookie) // 就能得到當前 cookie 的值

· 設置 cookie 的內容使用 document.cookie

// 設置一個時效性為會話級別的 cookiedocument.cookie = 'a=100'// 設置一個有過期時間的 cookiedocument.cookie = 'b=200;expires=Thu, 18 Dec 2043 12:00:00 GMT";'// 上面這個 cookie 數據會在 2043 年 12 月 18 日 12 點以后過期，過期后會自動消失

· 刪除 cookie 的內容使用 document.cookie

// 因為 cookie 不能直接刪除// 所以我們只能把某一條 cookie 的過期時間設置成當前時間之前// 那么瀏覽器就會自動刪除 cookiedocument.cookie = 'b=200;expires=Thu, 18 Dec 2018 12:00:00 GMT";'

COOKIE 操作封裝

· 因為 js 中沒有專門操作 COOKIE 增刪改查的方法

· 所以需要我們自己封裝一個方法

設置 cookie

/** * setCookie 用于設置 cookie * @param {STRING} key  要設置的 cookie 名稱 * @param {STRING} value  要設置的 cookie 內容 * @param {NUMBER} expires  過期時間 */function setCookie (key, value, expires) {

  const time = new Date()

  time.setTime(time.getTime() - 1000 * 60 * 60 * 24 * 8 + expires) // 用于設置過期時間

  document.cookie = `${key}=${value};expires=${time};`}

讀取 cookie

/** * getCookie 獲取 cookie 中的某一個屬性 * @param {STRING} key 你要查詢的 cookie 屬性 * @return {STRING} 你要查詢的那個 cookie 屬性的值 */function getCookie(key) {

  const cookieArr = document.cookie.split(';')

  let value = ''

  cookieArr.forEach(item => {

    if (item.split('=')[0] === key) {

      value = item.split('=')[1]

    }

  })

  return value}

刪除 cookie

/** * delCookie 刪除 cookie 中的某一個屬性 * @param {STRING} name 你要刪除的某一個 cookie 屬性的名稱 */function delCookie(name) {

  setCookie(name, 1, -1)}

以上就是如何理解JavaScript中的cookie，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。