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

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括復(fù)興網(wǎng)站建設(shè)、復(fù)興網(wǎng)站制作、復(fù)興網(wǎng)頁制作以及復(fù)興網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，復(fù)興網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到復(fù)興省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

好程序員web前端培訓(xùn)分享JavaScript學(xué)習(xí)筆記cookie，cookie 是一個(gè)以字符串的形式存儲(chǔ)數(shù)據(jù)的位置

每一個(gè) HTTP 請求都會(huì)在請求頭中攜帶 cookie 到服務(wù)端

每一個(gè) HTTP 響應(yīng)都會(huì)在響應(yīng)頭中攜帶 cookie 到客戶端

也就是說，cookie 是不需要我們手動(dòng)設(shè)置，就會(huì)自動(dòng)在 客戶端 和 服務(wù)端之間游走的數(shù)據(jù)

我們只是需要設(shè)置一下 cookie 的內(nèi)容就可以

COOKIE 的存儲(chǔ)形式

cookie 是以字符串的形式存儲(chǔ)，在字符串中以 key=value 的形式出現(xiàn)

每一個(gè) key=value 是一條數(shù)據(jù)

多個(gè)數(shù)據(jù)之間以 ; 分割

// cookie 的形態(tài)'a=100; b=200; c=300;'

COOKIE 的特點(diǎn)

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

00002. 數(shù)量有限制，一般是 50 條左右

00003. 有時(shí)效性，也就是有過期時(shí)間，一般是 會(huì)話級(jí)別（也就是瀏覽器關(guān)閉就過期了）

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

使用方式

· 讀取 cookie 的內(nèi)容使用 document.cookie

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

· 設(shè)置 cookie 的內(nèi)容使用 document.cookie

// 設(shè)置一個(gè)時(shí)效性為會(huì)話級(jí)別的 cookiedocument.cookie = 'a=100'// 設(shè)置一個(gè)有過期時(shí)間的 cookiedocument.cookie = 'b=200;expires=Thu, 18 Dec 2043 12:00:00 GMT";'// 上面這個(gè) cookie 數(shù)據(jù)會(huì)在 2043 年 12 月 18 日 12 點(diǎn)以后過期，過期后會(huì)自動(dòng)消失

· 刪除 cookie 的內(nèi)容使用 document.cookie

// 因?yàn)?cookie 不能直接刪除// 所以我們只能把某一條 cookie 的過期時(shí)間設(shè)置成當(dāng)前時(shí)間之前// 那么瀏覽器就會(huì)自動(dòng)刪除 cookiedocument.cookie = 'b=200;expires=Thu, 18 Dec 2018 12:00:00 GMT";'

COOKIE 操作封裝

· 因?yàn)?js 中沒有專門操作 COOKIE 增刪改查的方法

· 所以需要我們自己封裝一個(gè)方法

設(shè)置 cookie

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

  const time = new Date()

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

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

讀取 cookie

/** * getCookie 獲取 cookie 中的某一個(gè)屬性 * @param {STRING} key 你要查詢的 cookie 屬性 * @return {STRING} 你要查詢的那個(gè) 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 中的某一個(gè)屬性 * @param {STRING} name 你要?jiǎng)h除的某一個(gè) cookie 屬性的名稱 */function delCookie(name) {

  setCookie(name, 1, -1)}

以上就是如何理解JavaScript中的cookie，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。