好程序員web前端培訓分享JavaScript學習筆記cookie，cookie 是一個以字符串的形式存儲數據的位置
每一個 HTTP 請求都會在請求頭中攜帶 cookie 到服務端
每一個 HTTP 響應都會在響應頭中攜帶 cookie 到客戶端
也就是說，cookie 是不需要我們手動設置，就會自動在 客戶端 和 服務端之間遊走的數據
我們只是需要設置一下 cookie 的內容就可以
COOKIE 的存儲形式
cookie 是以字符串的形式存儲，在字符串中以 key=value 的形式出現
每一個 key=value 是一條數據
多個數據之間以 ; 分割
// cookie 的形態'a=100; b=200; c=300;'
COOKIE 的特點
.存儲大小有限制，一般是 4 KB 左右
.數量有限制，一般是 50 條左右
.有時效性，也就是有過期時間，一般是 會話級別（也就是瀏覽器關閉就過期了）
.有域名限制，也就是說誰設置的誰才能讀取
使用方式
讀取 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)}