摘要：理解進(jìn)公園背景這個(gè)公園有一個(gè)總公園總公園里有許多小公園總公園是登錄頁(yè)面小公園是域名相同的頁(yè)面第一次進(jìn)總公園第一次請(qǐng)求某個(gè)服務(wù)器工作人員檢查你的入園是否符合條件后端查看是否是注冊(cè)以后的用戶通過(guò)條件的話工作人員會(huì)給你一張票后端會(huì)給你一個(gè)響應(yīng)頭這

Cookie, Session, LocalStorage, SessionStorage Cookie 理解

進(jìn)公園

背景: 這個(gè)公園有一個(gè)總公園, 總公園里有許多小公園(總公園是登錄頁(yè)面, 小公園是域名相同的頁(yè)面)

第一次進(jìn)總公園, (第一次請(qǐng)求某個(gè)服務(wù)器)

工作人員檢查你的入園是否符合條件(后端查看是否是注冊(cè)以后的用戶)

通過(guò)條件的話工作人員會(huì)給你一張票(后端會(huì)給你一個(gè)響應(yīng)頭, 這個(gè)響應(yīng)頭的作用是設(shè)置一個(gè) cookie )

票的內(nèi)容是只有工作人員才知道是否可以入園的字符串

第二次進(jìn)總公園(第二次請(qǐng)求相同的域名)

你要帶上這個(gè)票進(jìn)公園(瀏覽器會(huì)在請(qǐng)求頭帶上cookie)

工作人員看到這個(gè)票, 確認(rèn)里面的內(nèi)容正確就給你進(jìn)去(后端看到這個(gè)cookie就會(huì)讓你直接進(jìn)入登錄后的頁(yè)面)

Cookie 的實(shí)現(xiàn)

服務(wù)器通過(guò) Set-Cookie 頭給客戶端一串字符串(背)

客戶端每次訪問(wèn)相同域名的網(wǎng)頁(yè)時(shí)，必須帶上這段字符串(背)

客戶端要在一段時(shí)間內(nèi)保存這個(gè)Cookie(背)

Cookie 默認(rèn)在用戶關(guān)閉頁(yè)面后就失效，后臺(tái)代碼可以任意設(shè)置 Cookie 的過(guò)期時(shí)間

大小大概在 4kb 以內(nèi)

Session的理解

進(jìn)公園

? 背景: 我是一個(gè)壞游客, 我知道什么樣的字符串就可以進(jìn)入公園, 于是我可以偽造假的門票, 工作人員發(fā)現(xiàn)了這個(gè)問(wèn)題, 所以工作人員采用更安全的方法來(lái)審查門票

第一次進(jìn)總公園, (第一次請(qǐng)求某個(gè)服務(wù)器)

工作人員檢查你的入園是否符合條件(后端查看是否是注冊(cè)以后的用戶)

通過(guò)條件的話工作人員會(huì)給你一張票(后端會(huì)給你一個(gè)響應(yīng)頭, 這個(gè)響應(yīng)頭的作用是設(shè)置一個(gè) cookie , cookie 的值是一個(gè)隨機(jī)數(shù))

并且工作人員把票的字符串和你的名字寫到一張表里(后端設(shè)置一個(gè)session, 保存在服務(wù)器內(nèi)存中, session的內(nèi)容是之前的隨機(jī)數(shù)對(duì)應(yīng)你的用戶信息)

票的內(nèi)容是只有工作人員才知道是否可以入園的字符串

第二次進(jìn)總公園(第二次請(qǐng)求相同的域名)

你要帶上這個(gè)票進(jìn)公園(瀏覽器會(huì)在請(qǐng)求頭帶上cookie)

工作人員看到這個(gè)票, 通過(guò)判斷票的字符串是否和表的字符串匹配, 如果匹配,那么說(shuō)明可以進(jìn)入(后端拿到請(qǐng)求內(nèi)容的cookie的隨機(jī)數(shù), 會(huì)和sessions的內(nèi)容進(jìn)行比對(duì), 看請(qǐng)求的cookie的隨機(jī)數(shù)有沒(méi)有在sessions上出現(xiàn),如果出現(xiàn)了, 就會(huì)讓你進(jìn)入登錄后的頁(yè)面)

比cookie多做兩件事情(標(biāo)了粗體)

sessions其實(shí)就是服務(wù)器的一塊內(nèi)存, key:value, 分別是隨機(jī)數(shù)和用戶的信息

Session的實(shí)現(xiàn)

將 SessionID（隨機(jī)數(shù)）通過(guò) Cookie 發(fā)給客戶端

客戶端訪問(wèn)服務(wù)器時(shí)，服務(wù)器讀取 SessionID

服務(wù)器有一塊內(nèi)存（哈希表）保存了所有 session

通過(guò) SessionID 我們可以得到對(duì)應(yīng)用戶的隱私信息，如 id、email

這塊內(nèi)存（哈希表）就是服務(wù)器上的所有 session

?

localStorage

掛在window的一個(gè)對(duì)象, 是瀏覽器的hash

掌握l(shuí)ocalStorage的三個(gè) api

localStorage.setItem("xxx", "yyy") 如果 yyy 是對(duì)象, 那么要用 JSON 轉(zhuǎn)一下再存儲(chǔ)

localStorage.getItem("xxx")

localStorage.clear()

localStorage存在c盤文件

LocalStorage 跟 HTTP 無(wú)關(guān)

HTTP 不會(huì)帶上 LocalStorage 的值

只有相同域名的頁(yè)面才能互相讀取 LocalStorage（沒(méi)有同源那么嚴(yán)格）

每個(gè)域名 localStorage 最大存儲(chǔ)量為 5Mb 左右（每個(gè)瀏覽器不一樣）

常用場(chǎng)景：記錄有沒(méi)有提示過(guò)用戶（沒(méi)有用的信息，不能記錄密碼）demo

LocalStorage 永久有效，除非用戶清理緩存

SessionStorage（會(huì)話存儲(chǔ)）

4,5,6,7同上

9不同: 在用戶關(guān)閉頁(yè)面（會(huì)話結(jié)束）后就失效 === 關(guān)閉頁(yè)面

Session 通過(guò) LocalStorage + 查詢參數(shù)實(shí)現(xiàn)

未完成

Cache-Control

寫在后端的相應(yīng)大文件AA的路由中, 給響應(yīng)內(nèi)容的第二部分加上這里的某些語(yǔ)法

那么在第二次瀏覽器想請(qǐng)求同樣的大文件AA時(shí), 服務(wù)器發(fā)現(xiàn)了, 直接不產(chǎn)生 HTTP 請(qǐng)求,

瀏覽器直接在本地內(nèi)存拿到大文件AA

在實(shí)際工作中, 入口文件(一般是index)不設(shè)置Cache-Control, 其他的文件都設(shè)置Cache-Control, 時(shí)間越長(zhǎng)越好

首頁(yè)不能設(shè)置Cache-Control的原因

假設(shè)設(shè)置了百度首頁(yè)的Cache-Control為一天

用戶一般進(jìn)入百度首頁(yè)只能是在 URL 中輸入www.baidu.com, 那么首頁(yè)在一天的時(shí)間內(nèi)都不能獲得最新的版本, 也可以理解為沒(méi)有接口去更新頁(yè)面了, 因?yàn)樗械穆房诙挤怄i了

但是為什么js文件, css文件又可以設(shè)置Cache-Control呢?

因?yàn)橛脩粢话悴粫?huì)自己去請(qǐng)求js文件, css文件

如果遇到j(luò)s文件更新版本, 那么怎么辦?

在前端請(qǐng)求js文件中, 給路徑加個(gè)查詢參數(shù)即可

這是原來(lái)的: