1，什么是 Cookie？

Cookie是一些數(shù)據(jù), 存儲于你電腦上的文本文件中。
當web服務(wù)器向瀏覽器發(fā)送web頁面時，在連接關(guān)閉后，服務(wù)端不會記錄用戶的信息。Cookie的作用就是用于解決如何記錄客戶端的用戶信息。當用戶訪問web頁面時，他的名字可以記錄在Cookie中。在該用戶下一次訪問該頁面時，可以在Cookie中讀取該用戶的訪問記錄。

• 當瀏覽器從服務(wù)器上請求web頁面時， 屬于該頁面的Cookie會被添加到該請求中。服務(wù)端可以通過這種方式來獲取用戶的信息。

1.1，存儲形式

Cookie以鍵值對形式存儲，如下所示：

userName=pony

1.2，常用屬性

Cookie描述

1.3，大小限制

2，增 or 改Cookie

/**
 * 設(shè)置cookie
 * @param {String} key 鍵
 * @param {String} value 值
 * @param {String} expires 過期時間(yyyy-MM-dd 或 yyyy-MM-dd HH:mm:ss 或 時間戳) => default：頁面關(guān)閉即過期(Session)
 * @param {String} domain 域 => default：當前域
 * @param {String} path 路徑 => default：/
*/
function setCookie(key, value, expires = '', domain = window.location.hostname, path = '/') {
  const time = expires ? new Date(expires) : expires
  console.log(time)
  const cookie = `${key}=${value}; expires=${time}; domain=${domain}; path=${path}`
  document.cookie = cookie
}

調(diào)用例子：

setCookie('user', '我是你爸爸', '2022-02-20 16:29:00').
// 或者
setCookie('user', '我是你爸爸', '2022-02-20')
// 或者
const timestamp = new Date('2022-10-01').getTime()
setCookie('user', '我是你爸爸', timestamp)

3，查Cookie

/**
 * 獲取所有cookie的key
 * @return {Array<string>} Cookie鍵組成的數(shù)組 
*/
function getAllCookieKey() {
  const Cookie = document.cookie
  const cookieList = Cookie.split('; ')
  return cookieKeyList = cookieList.map(item => {
    return item.split('=')[0]
  })
}

/**
 * 根據(jù)cookie的key獲取對應(yīng)的值
 * @param {String} key 鍵
 * @return {String} value 值
*/
function cookieKeyGetValue(key) {
  const Cookie = document.cookie
  const cookieList = Cookie.split('; ')
  const cookieKeyList = cookieList.map(item => {
    return item.split('=')[0]
  })
  const index = cookieKeyList.indexOf(key)
  return cookieList[index].split('=')[1]
}

4，刪Cookie

/**
 * 根據(jù)key清除cookie
 * @param {String} key 鍵
 * @param {String} domain 域 => default：當前域
 * @param {String} path 路徑 => default：/
*/
function clearCookie(key, domain = window.location.hostname, path = '/') {
  const Time = new Date()
  Time.setTime(Time.getTime() + -1 * 24 * 60 * 60 * 1000)
  const expires = `expires=${Time.toUTCString()}`
  document.cookie = `${key}=; ${expires}; path=${path}; domain=${domain}`
}


// 清除所有cookie
function clearAllCookie() {
  const cookieKeyList = getAllCookieKey()
  for (let key of cookieKeyList) {
    clearCookie(key)
  }
}

如果看了覺得有幫助的，我是@鵬多多，歡迎 點贊 關(guān)注 評論；
END

PS：在本頁按F12，在console中輸入document.querySelectorAll('._2VdqdF')[0].click()，有驚喜哦

往期文章

• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 助你上手Vue3全家桶之Vue3教程
• 超詳細！Vuex手把手教程
• 使用nvm管理node.js版本以及更換npm淘寶鏡像源
• 超詳細！Vue-Router手把手教程
• vue中利用.env文件存儲全局環(huán)境變量，以及配置vue啟動和打包命令
• 微信小程序?qū)崿F(xiàn)搜索關(guān)鍵詞高亮

個人主頁

• CSDN
• GitHub
• 簡書
• 博客園
• 掘金