最近看了localStorage和appcache，順帶著也研究了下cookie。在localStorage和sessionStorage出來后，感覺cookie已經(jīng)什么作用了，然鵝我在日常業(yè)務(wù)中也沒怎么使用cookie.......，前端方面使用cookie也只有document.cookie這一個(gè)api，感覺使用起來還是簡單方便。這里著重記錄一下它的注意點(diǎn)。
缺陷
- 會(huì)附加在每個(gè)http的請(qǐng)求中，無形中怎加了流量
- http請(qǐng)求中是明文傳遞的， 安全性成問題。（https除外）
- 大小限制在4kb
注意點(diǎn)
cookie可以跨越一個(gè)域名下的多個(gè)網(wǎng)頁，但不能跨越多個(gè)域名使用。
也就是說他在www.a.com/index.html和www.a.com/index2.html中是可以共用的，但是在www.a.com和www.b.com下，就不行了。遵循跨域原則。
cookie 將信息存儲(chǔ)于用戶硬盤，它最根本的用途是 Cookie 能夠幫助 Web 站點(diǎn)保存有關(guān)訪問者的信息
存儲(chǔ)于用戶硬盤，因此可以作為全局變量，這是它最大的一個(gè)優(yōu)點(diǎn)。但是它是明文傳輸?shù)?，所以不要放一些敏感信?/p>
存儲(chǔ)在cookie的數(shù)據(jù)「每次」都會(huì)被瀏覽器「自動(dòng)」放在http請(qǐng)求中。
瀏覽器有一個(gè)自主行為，就是會(huì)自動(dòng)將該url下的cookie帶入到request header中，這就很尷尬了，所以服務(wù)端在使用cookie的時(shí)候要時(shí)刻注意，那些有用的信息要放入，哪些無用的信息就避免放入，不然會(huì)增加帶寬， 影響性能，前端上如果使用axios發(fā)送請(qǐng)求，在不需要帶上cookie的時(shí)候，可以設(shè)置withCredentialse為true， jquery同理。
使用流程
1.起作用
cookie 是存在用戶硬盤中，用戶每次訪問站點(diǎn)時(shí)，Web應(yīng)用程序都可以讀取 Cookie 包含的信息。當(dāng)用戶再次訪問這個(gè)站點(diǎn)時(shí)，瀏覽器就會(huì)在本地硬盤上查找與該 URL 相關(guān)聯(lián)的 Cookie。如果該 Cookie 存在，瀏覽器就將它添加到request header的Cookie字段中，與http請(qǐng)求一起發(fā)送到該站點(diǎn)。
2. cookie的格式
瀏覽器提供了 cookie 屬性給 JavaScript，因此可以通過 document.cookie 來訪問這個(gè)頁面中的cookie。
這是一串字符串，仔細(xì)觀察，我們可以發(fā)現(xiàn)規(guī)律。每個(gè) cookie 都以名/值對(duì)的形式，即 name=value，名稱和值都必須是URL編碼的，且兩對(duì)cookie間以分號(hào)和空格隔開。（ps：千萬不要忘了空格，特別是在獲取某個(gè) cookie 時(shí)）
如果手動(dòng)添加幾個(gè)的話就是：
// document.cookie = "name=value[; expires=GMTDate][; domain=domain][; path=path][; secure]"
document.cookie = "test1=myCookie1;"
document.cookie = "test2=myCookie2; domain=.google.com.hk; path=/webhp"
document.cookie = "test3=myCookie3; domain=.google.com.hk; expires=Sat, 04 Nov 2017 16:00:00 GMT; secure"
document.cookie = "test4=myCookie4; domain=.google.com.hk; max-age=10800;"
domain、Path、Expries/Max-age、httponly(即HTTP選項(xiàng)）、Secure 等均是 cookie 的屬性，
- domain、path： 指定cookie在哪些域中共享
- Expries/Max-age：失效時(shí)間和失效時(shí)間段， 前者規(guī)定一個(gè)gmt時(shí)間，Sat, 04 Nov 2017 16:00:00 GMT，這表明這個(gè) cookie 將在2017-11-04的16時(shí)整失效，而后者是一個(gè)時(shí)間段，例如max-age=10800;"，也就是生效時(shí)間是3個(gè)小時(shí)， 新的http協(xié)議已經(jīng)使用這個(gè)字段替換了expries
- secure： secure是 cookie 的安全標(biāo)志，通過cookie直接包含一個(gè)secure單詞來指定，也是cookie中唯一一個(gè)非名值對(duì)兒的部分。指定后，cookie只有在使用SSL連接（如HTTPS請(qǐng)求）時(shí)才會(huì)發(fā)送到服務(wù)器。
默認(rèn)情況為空，不指定 secure 選項(xiàng)，即不論是 http 請(qǐng)求還是 https 請(qǐng)求，均會(huì)發(fā)送cookie。 - httponly：httponly屬性是用來限制客戶端腳本對(duì)cookie的訪問。將 cookie 設(shè)置成 httponly 可以減輕xss攻擊的危害，防止cookie被竊取，以增強(qiáng)cookie的安全性。（由于cookie中可能存放身份驗(yàn)證信息，放在cookie中容易泄露），如果設(shè)置了httponly，js是無法讀取和修改 httponly cookies，當(dāng)然也不能設(shè)置 cookie 為 httponly，這只能通過服務(wù)器端去設(shè)置。默認(rèn)情況是不指定 httponly，即可以通過 js 去訪問。
cookie編碼
感覺沒啥亂用，但還是記錄下，簡單的就是在關(guān)鍵value上加上encodeURIComponent
document.cookie = encodeURIComponent("test") + "=" + encodeURIComponent("myCookie") + "; max-age=3600";
cookie刪除，修改
cookie的刪除其實(shí)特別簡單，也是對(duì)此cookie重新賦值，將expries設(shè)為一個(gè)過去的時(shí)間或?qū)ax-age設(shè)為0，都可以刪除cookie。同時(shí)也要特別注意此cookie的domain、path要與原來保持一致
