　　好程式設計師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

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

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

// 因為 cookie 不能直接刪除// 所以我們只能把某一條 cookie 的過期時間設定成當前時間之前// 那麼瀏覽器就會自動刪除 cookie document .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 )}