上篇介紹了注冊的基本流程，下篇簡單的講講登錄的流程以及Cookie的出現(xiàn)

實現(xiàn)登錄的小功能

當(dāng)你在瀏覽器的輸入框里輸入localhost:8080/sign_in的時候，會發(fā)起GET請求，去訪問sign_in.html

if (path === '/sign_up' && method === 'GET') {let string = fs.readFileSync('./sign_up.html', 'utf8')response.statusCode = 200response.setHeader('Content-Type', 'text/html;charset=utf-8')response.write(string)response.end() } 復(fù)制代碼

CSS布局與上篇的布局基本一樣，略去不表～

比對用戶的信息與數(shù)據(jù)庫里面的信息是否匹配

依然是上篇的套路，獲得用戶formdata后，分析數(shù)據(jù)，和數(shù)據(jù)庫里面的比對

var users = fs.readFileSync('./db/users', 'utf8') try {users = JSON.parse(users) //[] JSON也支持數(shù)組 } catch (exception) {users = [] }let found for (let i = 0; i < users.length; i++) { if (users[i].email === email && users[i].password === password) {found = truebreak} } if (found) {response.setHeader('Set-Cookie', `sign_in_email=${email};HTTPOnly`)response.statusCode = 200 } else {response.statusCode = 401 } 復(fù)制代碼

不同的是引入了一個header，也就是今天的主角--Cookie

其實這和平常上網(wǎng)的情形類似的，有時候我們訪問一些購物網(wǎng)站，并沒有登錄，但是你在購物車里面添加?xùn)|西了，當(dāng)你逛了以后再回來的時候，發(fā)現(xiàn)購物車里面有你的記錄，幫你做這個事的也是cookie。

因為HTTP協(xié)議是無狀態(tài)的，即服務(wù)器不知道用戶上一次做了什么，這嚴重阻礙了交互式Web應(yīng)用程序的實現(xiàn)。在典型的網(wǎng)上購物場景中，用戶瀏覽了幾個頁面，買了一盒餅干和兩瓶飲料。最后結(jié)帳時，由于HTTP的無狀態(tài)性，不通過額外的手段，服務(wù)器并不知道用戶到底買了什么，所以Cookie就是用來繞開HTTP的無狀態(tài)性的“額外手段”之一。服務(wù)器可以設(shè)置或讀取Cookies中包含信息，借此維護用戶跟服務(wù)器會話中的狀態(tài)。

可以看出，當(dāng)你在sign_in發(fā)起GET請求并設(shè)置了Set-Cookie之后，其他的同源的頁面，又都會帶上Cookie，也就能保證同源的網(wǎng)頁向服務(wù)器發(fā)起請求的時候，服務(wù)器能夠明白，你己經(jīng)是登錄的用戶了，與那些沒有拿到cookie的頁面區(qū)別開來。

Cookie的入門

為什么要在cookie里面寫上HttpOnly呢，因為這個可以防止有些牛人使用JS修改Cookie的內(nèi)容。

• 如果不寫這個的話，可以使用js修改的

寫了HttpOnly之后將無法修改

_ga是啥

這個是Chrome的功能，用于分析cookie的

每一部分的作用詳見這里

Cookie的特點

通過上述的例子，可以總結(jié)幾點重要的特點

服務(wù)器通過 Set-Cookie 響應(yīng)頭設(shè)置 Cookie

瀏覽器得到 Cookie 之后，每次請求都要帶上 Cookie

服務(wù)器讀取 Cookie 就知道登錄用戶的信息（email）

當(dāng)然了，還有幾個問題需要解答一下。

Cookie 存在哪 存在硬盤的一個文件里面

Cookie會被用戶篡改嗎？ 可以，也就是說它并不安全的。

Cookie 有效期嗎？

默認有效期20分鐘左右，不同瀏覽器策略不同 后端可以強制設(shè)置有效期

Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date> Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit> 復(fù)制代碼

具體語法看 Set-Cookie

用戶登錄后，首頁顯示不同

既然你成功登錄，理應(yīng)跳轉(zhuǎn)到首頁，并顯示相應(yīng)的界面。

$.post('/sign_in', hash) .then((response) => {window.location.href = '/' }, (request) => {alert('郵箱與密碼不匹配')} ) 復(fù)制代碼

然后首頁的信息應(yīng)該根據(jù)用戶信息做出相應(yīng)的變化

let cookies = request.headers.cookie.split('; ') //['email=..@..', 'a=1'] let hash = {} cookies.forEach((cookie) => {let parts = cookie.split('=')let key = parts[0]let value = parts[1]hash[key] = value }) let email = hash.sign_in_email let users = fs.readFileSync('./db/users', 'utf8') users = JSON.parse(users) let foundUser for (let i = 0; i < users.length; i++) {if (users[i].email === email) {foundUser = users[i]break} } if (foundUser) {string = string.replace('email', foundUser.email) } else {string = string.replace('恭喜，email你已成功登錄', '沒有該用戶') } 復(fù)制代碼

這里的代碼邏輯與上篇的基本一致，唯一的不同在于第一行代碼

let cookies = request.headers.cookie.split('; ') //['email=..@..', 'a=1']

為什么用；字符來分割呢，這是因為可以有多個cookie

Cookie的兩個作用

一般來說常見的作用有如下兩個：

識別用戶的身份。當(dāng)用戶A去訪問localhost:8080的時候，服務(wù)器會給A一個獨一無二的id=00A(這就是cookie)，當(dāng)用戶A訪問localhost:8080的其他網(wǎng)頁的時候，都會帶著那個獨一無二的id。當(dāng)B用戶來訪問localhost:8080的時候，服務(wù)器發(fā)現(xiàn)他沒有任何標(biāo)識，也會給他一個獨一無二的id=00B，所以借助cookie服務(wù)器端就能夠分清楚誰是誰了。

記錄你的瀏覽歷史。最常見的需求就是你去逛購物網(wǎng)站，你添加到購物車里面的東西過幾天一定會在，而不會憑空消失了。例如A用戶去taobao.com去買點東西，添加了一個熱水壺、一部小米手機到購物車里面，那么服務(wù)器端可以改寫你上面的cookie使之具體化「id=00A; cart=A1,A2」，表示你購物車里面買了倆東西。你過幾天想起來了，去購物車里面看，熱水壺、小米手機還在里面。瀏覽器并不會刪除你存到硬盤上的cookie。

一張圖總結(jié)注冊登錄的過程

接下來可以去搞一搞其他的，像什么session LocalStorage……(@ο@) 哇～

代碼鏈接sign_in.html

server.js

總結(jié)

以上是生活随笔為你收集整理的一块小饼干(Cookie)的故事-下篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。