久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁  >  技術(shù)干貨  > cookie的簡(jiǎn)單介紹

cookie的簡(jiǎn)單介紹

來源:千鋒教育
發(fā)布人:qyf
時(shí)間: 2022-09-29 17:12:51 1664442771

  在正式介紹cookie之前我們要先來說一說網(wǎng)絡(luò)通訊協(xié)議

  首先:什么是網(wǎng)絡(luò)通訊協(xié)議?所謂協(xié)議一般就是甲乙雙方溝通要遵循的規(guī)則與方式,那么通訊協(xié)議就是通訊雙方要遵循的規(guī)則,網(wǎng)絡(luò)通訊協(xié)議則是計(jì)算機(jī)雙方傳輸數(shù)據(jù)所要遵循的協(xié)議,瀏覽網(wǎng)頁時(shí), 一般使用http或者h(yuǎn)ttps,而它們都是基于TCP/IP協(xié)議的。

  TCP/IP協(xié)議是面向連接的

  在發(fā)送數(shù)據(jù)之前,都必須先在雙方之間建立一條連接。在TCP/IP協(xié)議中,TCP 協(xié)議提供可靠的連接服務(wù),連接是通過三次握手進(jìn)行初始化的,如下圖:

圖片 1

  客戶端要向服務(wù)器發(fā)送請(qǐng)求,首先會(huì)發(fā)送一個(gè)請(qǐng)求連接,這是第一次握手;

  當(dāng)服務(wù)器收到這個(gè)請(qǐng)求以后返回給客戶端一條消息,這是第二次握手;

  然后客戶端再把確認(rèn)消息發(fā)給服務(wù)器,這是第三次握手;

  經(jīng)過這三次握手客戶端與服務(wù)器之間的連接就建立起來了。

  就像打電話一樣,客戶端向服務(wù)器撥通電話,服務(wù)器接起電話,說了一句:“喂?”,然后客戶端收到了這句“喂”,再跟服務(wù)器說一聲“喂!”,連接就建立好了,可以愉快的通話了

  建立連接需要經(jīng)過三次握手,那數(shù)據(jù)傳輸結(jié)束以后呢?我們打電話事情說完了要掛掉電話要經(jīng)歷一個(gè)怎樣的過程?可能對(duì)話是下面這樣的:

  A:“我掛了”

  B:“好”

  A:“拜拜”

  B:“拜拜,我也掛了”

  A:“好,拜拜”

  B:“嗯嗯,拜拜,掛了”

  A:“好,拜拜”

  B:“拜拜”

  有點(diǎn)搞笑 ,經(jīng)過好多次消息確認(rèn)好不容易才能把電話掛掉,但這并不是無聊,而是要互相確認(rèn)對(duì)方是否真的已經(jīng)準(zhǔn)備斷開連接了,那么我們的TCP/IP協(xié)議也會(huì)考慮到這一點(diǎn),要斷開連接會(huì)經(jīng)過四次揮手,如下圖:

圖片 2

  數(shù)據(jù)傳輸結(jié)束時(shí),客戶端向服務(wù)器發(fā)送一條結(jié)束的消息,服務(wù)器收到消息后會(huì)馬上返回給客戶端確認(rèn)消息,并隨后發(fā)送一條“我也結(jié)束了”的消息,當(dāng)客戶端收到這條消息以后會(huì)響應(yīng)給服務(wù)器確認(rèn)消息,服務(wù)器收到這條確認(rèn)消息以后就會(huì)關(guān)閉,而客戶端則會(huì)等待兩個(gè)單位時(shí)間之后關(guān)閉。注意這里客戶端并不是立馬關(guān)閉,而是會(huì)等帶兩個(gè)單位時(shí)間,為什么是兩個(gè)單位時(shí)間呢?首先,所謂的單位時(shí)間指的是一次前后端數(shù)據(jù)傳輸所花費(fèi)的時(shí)間,這里要等待兩個(gè)單位時(shí)間是因?yàn)榭蛻舳艘葦?shù)據(jù)發(fā)送到服務(wù)器以后確認(rèn)收不到數(shù)據(jù)返回,這一來一去就是兩個(gè)單位時(shí)間了,因?yàn)槿绻@個(gè)時(shí)候服務(wù)器并沒有結(jié)束的話會(huì)再次給客戶端響應(yīng),而客戶端在兩個(gè)單位時(shí)間后收不到響應(yīng)則代表本次數(shù)據(jù)傳輸正式結(jié)束。

  下面貼出兩張動(dòng)圖:

圖片 3

圖片 4

  這兩張動(dòng)圖對(duì)于計(jì)算機(jī)專業(yè)的讀者可以嘗試探究,本文不做詳細(xì)展開

  http無狀態(tài)

  HTTP協(xié)議, 使我們用戶上網(wǎng)常見的協(xié)議, 簡(jiǎn)單的理解, 它是基于TCP/IP協(xié)議改造加工出來的,也就是說每一個(gè)http請(qǐng)求都會(huì)通過三次握手建立連接,傳輸數(shù)據(jù), 然后四次揮手?jǐn)嚅_連接.

  例如當(dāng)你登錄淘寶的時(shí)候, 你的瀏覽器跟淘寶服務(wù)器之間就行了 一個(gè) http鏈接.

  然后, 當(dāng)首頁數(shù)據(jù)加載完成, 鏈接就斷開了.

  這時(shí)服務(wù)就無法保存你的狀態(tài). 你瀏覽了什么商品? 購物車加了幾個(gè)東西? 有沒有關(guān)閉瀏覽器? 服務(wù)器統(tǒng)統(tǒng)不知道了

  所以, 我們說:http協(xié)議是一種無狀態(tài)協(xié)議,這里的無狀態(tài)指的是無法保存狀態(tài),因?yàn)橐坏?shù)據(jù)傳輸結(jié)束連接就會(huì)斷開,就無法獲取一些狀態(tài)了,這樣設(shè)計(jì)的好處就是可以節(jié)約資源,需要的時(shí)候才發(fā)出請(qǐng)求,但是也會(huì)造成一些困擾,

  尤其是關(guān)于身份驗(yàn)證. 用戶在登錄頁面完成了登錄,那么接下來就會(huì)回到首頁或者其他頁面進(jìn)行操作,但問題是這個(gè)時(shí)候登錄的這次http請(qǐng)求已經(jīng)結(jié)束了,所以當(dāng)完成頁面跳轉(zhuǎn)之后就取不到登錄狀態(tài)了,那怎么辦?再登錄一次?

  當(dāng)你反復(fù)使用http協(xié)議跟服務(wù)器建立鏈接的時(shí)候, 服務(wù)器怎么才能知道, 你是一個(gè)登錄過的合法用戶?? 為了解決這個(gè)問題, 出現(xiàn)了cookie技術(shù).

  cookie

  cookie稱之為會(huì)話跟蹤技術(shù),顧名思義,就是在一次會(huì)話中跟蹤記錄一些狀態(tài)。首先,所謂的”會(huì)話“指的就是從瀏覽器打開一個(gè)網(wǎng)站到訪問它的其他網(wǎng)頁直到瀏覽器關(guān)閉的這個(gè)過程。

  cookie就可以在一次會(huì)話從開始到結(jié)束的整個(gè)過程,全程跟蹤記錄客戶端的狀態(tài)(例如:是否登錄、購物車信息、是否已下載、是否 已點(diǎn)贊、視頻播放進(jìn)度等等)。

  cookie是服務(wù)器存儲(chǔ)在客戶端本地的一個(gè)文件. 它就好比服務(wù)器發(fā)給客戶端的一個(gè)身份標(biāo)識(shí), 有了這個(gè)身份牌, 只要客戶端隨身攜帶這個(gè)身份牌. 服務(wù)器就能識(shí)別我們的身份了

  cookie的特點(diǎn)

  1. 只能存儲(chǔ)文本

  2. 單條存儲(chǔ)有大小限制4KB左右

  3. 數(shù)量限制(一般瀏覽器,限制大概在50條左右)

  4. 讀取有域名限制:不可跨域讀取,只能由來自 寫入cookie的 同一域名 的網(wǎng)頁可進(jìn)行讀取。簡(jiǎn)單的講就是,哪個(gè)服務(wù)器發(fā)給你的cookie,只有哪個(gè)服務(wù)器有權(quán)利讀取(身份牌是我的,當(dāng)然只有我能讀取,你媳婦兒的手機(jī)自動(dòng)連接了鄰居老王家的wifi,你知道這意味著什么嗎?)

  5. 時(shí)效限制:每個(gè)cookie都有時(shí)效,默認(rèn)的有效期是,會(huì)話級(jí)別:就是當(dāng)瀏覽器關(guān)閉,那么cookie立即銷毀,但是我們也可以在存儲(chǔ)的時(shí)候手動(dòng)設(shè)置cookie的過期時(shí)間

  6. 路徑限制:存cookie時(shí)候可以指定路徑,只允許子路徑讀取外層cookie,外層不能讀取內(nèi)層。一般cookie都存在項(xiàng)目的根目錄,這樣就可以避免這種問題。

  cookie的使用

  其實(shí), 如果是單純的身份驗(yàn)證場(chǎng)景下, 前端開發(fā)是用不到cookie的

  從服務(wù)器發(fā)送cookie給瀏覽器, 瀏覽器保存cookie, 到瀏覽器每次發(fā)送請(qǐng)求 ,攜帶著cookie文件, 這些事情瀏覽器全部都可以自己完成. 根本不需要我們前端開發(fā)人員參與.

  但我們有時(shí)也會(huì)利用cookie, 在前端存儲(chǔ)一些狀態(tài)信息.

  比如某個(gè)視頻看到了32分15秒.

  我們可以通過前端操作, 直接將這個(gè)數(shù)據(jù)保存在本地cookie文件中

  下次打開網(wǎng)站, 我們?cè)俅巫x取這個(gè)信息

  然后直接向服務(wù)器請(qǐng)求32分16秒的視頻內(nèi)容.

  前端如何通過JS操作cookie

  cookie的使用方式很簡(jiǎn)單 ,系統(tǒng)提供的只有一個(gè)屬性 document.cookie,無論是存還是取或者其他操作都是通過這一個(gè)屬性來完成(注:cookie是http協(xié)議下的技術(shù),所以不要用file的方式打開本地html文件測(cè)試cookie,雖然由部分瀏覽器也在file協(xié)議下實(shí)現(xiàn)了cookie,但是不推薦這么做)。

  首先,我們來看看如何存:

  document.cookie = 'username=dary' // 存一條username為dary的cookie

圖片 5

  但是如果當(dāng)我們要存一條中文的cookie,比如:username=張三,在部分低版本瀏覽器就會(huì)遇到一些位置錯(cuò)誤,這時(shí)就可以使用 encodeURIComponent 編碼對(duì)中文進(jìn)行編碼:

  document.cookie = `username=encodeURIComponent('大林')`

圖片 6

  可以看到,中文內(nèi)容已經(jīng)被編碼了,以后取得時(shí)候我們可以通過decodeURIComponent 方法進(jìn)行解碼,下文會(huì)提到

  cookie的時(shí)效性

  現(xiàn)在我們回頭去看看上面我們存過的cookie,其中有Expires/max-Age選項(xiàng),這一項(xiàng)指的就是cookie的有效期,我們可以看到是session,代表會(huì)話期,也就是默認(rèn)的會(huì)話結(jié)束cookie失效,這時(shí)我們重啟瀏覽器就看不到這條cookie了。

圖片 7

  除了默認(rèn)的會(huì)話過期我們還可以手動(dòng)設(shè)置cookie的過期時(shí)間,比如:7天后過期

  var date = new Date()

  date.setDate(date.getDate() + 7)

  document.cookie = `username=${encodeURIComponent('大林')};expires=${date.toUTCString()}`

圖片 8

  我們可以看到過期時(shí)間已經(jīng)是7天以后了,這里我用了toUTCString()方法轉(zhuǎn)成了標(biāo)準(zhǔn)時(shí)區(qū),所以比北京時(shí)間快8個(gè)小時(shí),這時(shí)我們關(guān)閉瀏覽器再次打開,仍然可以看到這條cookie

  cookie的存儲(chǔ)路徑

  我們來測(cè)試一下路徑,隨便進(jìn)入項(xiàng)目中某一個(gè)目錄或者新建一個(gè)目錄,然后把一下代碼放進(jìn)去執(zhí)行

  document.cookie = 'username=dary'

圖片 9

  我們可以看到,path不再是之前的 / 了,而是當(dāng)前目錄,這時(shí)我們?cè)倩氐绞醉?,你?huì)發(fā)現(xiàn),這條cookie不見了,因?yàn)橥鈱訒r(shí)訪問不了內(nèi)層目錄存的cookie的。

  所以我們一般存cookie都會(huì)這么寫:

  document.cookie = 'username=dary;path=/'

  不管當(dāng)前目錄是誰統(tǒng)一存根目錄,這樣項(xiàng)目中任意位置都可以訪問這一條cookie,這就perfect 啦!

  由此:我們可以封裝一個(gè)存儲(chǔ)cookie的方法如下:

  /** 存一條cookie

  * @param {string} key 要存的cookie的名稱

  * @param {string} value 要存的cookie的值

  * @param {object} [options] 可選參數(shù),過期時(shí)間和目錄,如:{ path: '/', expires: 7 }存根目錄7天過期的cookie

  */

  function setCookie (key, value, options) {

  var str = `${key}=${encodeURIComponent(value)}`

  // 先判斷options是否傳進(jìn)來了

  if (options) {

  // 如果傳進(jìn)來了再判斷有哪個(gè)屬性

  if (options.path) {

  // 路徑拼接進(jìn)去

  str += `;path=${options.path}`

  }

  if (options.expires) {

  var date = new Date()

  // 日期設(shè)置為過期時(shí)間

  date.setDate(date.getDate() + options.expires)

  str += `;expires=${date.toUTCString()}`

  }

  }

  document.cookie = str

  }

  取cookie

  現(xiàn)在我們掌握了如何存cookie,接下來看看怎么取吧

  取cookie同樣使用document.cookie這個(gè)屬性:

  console.log(document.cookie) // username=dary

  但是如果我們?cè)谝粋€(gè)網(wǎng)站里存了多條cookie,這個(gè)時(shí)候得到的結(jié)果就是

  console.log(document.cookie) // username=dary; age=18

  多條cookie之間以; 隔開,注意:這里是分號(hào)和一個(gè)空格,這個(gè)對(duì)我們拆開每一條cookie非常重要。所以我們現(xiàn)在希望能把cookie每一條拆開,得到一個(gè)對(duì)象,這樣就可以取得某一條cookie的值了,所以我們可以封裝一個(gè)獲取cookie的方法如下:

  /** 獲取某一條cookie

  * @param {string} key 要獲取的cookie的名稱

  * @retrun {string} 當(dāng)前這條cookie的值

  */

  getCookie (key) {

  var str = document.cookie

  var arr = str.split('; ')

  var obj = new Object()

  arr.forEach(item => {

  var subArr = item.split('=')

  obj[subArr[0]] = decodeURIComponent(subArr[1])

  })

  return obj[key]

  }

  刪除cookie

  刪除cookie的方式特別簡(jiǎn)單,我們只需要把cookie的過期時(shí)間設(shè)置為已經(jīng)過去了的時(shí)間就行了,這個(gè)時(shí)候?yàn)g覽器一看,誒?這條cookie不是已經(jīng)過期了么?就只能把它刪掉了 ,方法如下:

  /** 刪一條cookie

  * @param {string} key 要?jiǎng)h的cookie的名稱

  * @param {path} [path] 可選參數(shù),要?jiǎng)h的cookie的所在的路徑,如果就是當(dāng)前路徑這個(gè)參數(shù)可以不傳

  */

  function removeCookie (key, path) {

  var date = new Date()

  date.setDate(date.getDate() - 1) // 過期時(shí)間設(shè)置為昨天

  var str = `${key}='';expires=${date.toUTCString()}`

  if (path) {

  str += `;path=${path}`

  }

  document.cookie = str

  }

  修改cookie

  重新存一下把之前的覆蓋掉就是修改了cookie了

  最后附上一個(gè)cookie方法,既可以完成存也可以取,甚至可以刪

  // 通過判斷有沒有傳第二個(gè)參數(shù)value來決定是存還是取

  // 這個(gè)方法也可以用域刪cookie,比如:cookie('username', '', { expires: -1, path: '/' })

  function cookie (key, value, options) {

  if (value) {

  var str = `${key}=${encodeURIComponent(value)}`

  if (options) {

  if (options.path) {

  str += `;path=${options.path}`

  }

  if (options.expires) {

  var date = new Date()

  date.setDate(date.getDate() + options.expires)

  str += `;expires=${date.toUTCString()}`

  }

  }

  document.cookie = str

  } else {

  var str = document.cookie

  var arr = str.split('; ')

  var obj = new Object()

  arr.forEach(item => {

  var subArr = item.split('=')

  obj[subArr[0]] = decodeURIComponent(subArr[1])

  })

  return obj[key]

  }

  }

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
大數(shù)據(jù)測(cè)試工程師需要具備哪些技能?

一、理解大數(shù)據(jù)概念大數(shù)據(jù)測(cè)試工程師需要理解大數(shù)據(jù)的基本概念和原理,如分布式存儲(chǔ)、MapReduce、實(shí)時(shí)計(jì)算等。他們還需要了解如何處理大規(guī)模的...詳情>>

2023-10-14 23:43:03
為什么SpringBoot的 jar 可以直接運(yùn)行?

一、JAR文件的結(jié)構(gòu)與執(zhí)行方式Spring Boot的JAR包是Java Archive的縮寫,它是一種壓縮文件格式,可以將Java項(xiàng)目的類文件、資源文件以及依賴庫等...詳情>>

2023-10-14 23:01:49
站群服務(wù)器是什么?

站群服務(wù)器的含義與用途站群服務(wù)器主要用于支持站群,即由一組相互鏈接的網(wǎng)站組成的群體。這些網(wǎng)站通常由同一組織或個(gè)人擁有,并且經(jīng)常會(huì)互相鏈...詳情>>

2023-10-14 22:46:12
自編碼器是什么?

一、自編碼器原理自編碼器的設(shè)計(jì)靈感源于神經(jīng)科學(xué)中關(guān)于感知系統(tǒng)的認(rèn)知原理,它的核心思想是將輸入數(shù)據(jù)經(jīng)過編碼過程,形成一個(gè)隱藏層的特征表示...詳情>>

2023-10-14 22:41:10
什么是云網(wǎng)融合?

一、云網(wǎng)融合的定義云網(wǎng)融合是指將云計(jì)算與網(wǎng)絡(luò)技術(shù)相結(jié)合,實(shí)現(xiàn)資源的共享、業(yè)務(wù)的協(xié)同,將網(wǎng)絡(luò)與云端服務(wù)深度融合,提供更靈活、高效、安全的...詳情>>

2023-10-14 22:31:47
快速通道