01-cookie · Nodejs

# cookie 每個 Cookie 都有一定的屬性，如什么時候失效，要發送到哪個域名，哪個路徑等等。這些屬性是通過 Cookie 選項來設置的，Cookie 選項包括：expires(有效期)、domain、path(domain 和 path一起來限制 cookie 能被哪些 URL 訪問)、secure(限制 HTTPS 傳輸)、HttpOnly(限制 JS 代碼操作)。在設置任一個 Cookie 時都可以設置相關的這些屬性，當然也可以不設置，這時會使用這些屬性的默認值。在設置這些屬性時，屬性之間由一個**分號**和一個**空格**隔開。 ~~~ 'key=name; expires=Thu, 25 Feb 2016 04:18:00 GMT; domain=ppsc.sankuai.com; path=/; secure; HttpOnly' ~~~ ~~~ document.cookie = 'name=zs'; ? ? ? ? ? ?//設置數據 ? document.cookie = 'email=18@126.com'; ? //設置數據 ? document.cookie = 'name=ls'; ? ? ? ? ? ?// 修改 ? var date = new Date(); date.setDate(date.getDate() + 7); ? document.cookie = 'age=18; expires=' + date; // 設置數據并設置有效期 console.log(document.cookie) ? ? ? ? ? ? ? ? // 獲取數據 ~~~ # 同源說明若兩個頁面的協議，端口（如果有指定）和域名都相同，則兩個頁面具有相同的源。下表給出了相對 [http://store.company.com/dir/page.html](http://store.company.com/dir/page.html) 同源檢測的示例： * [http://store.company.com/dir2/other.html](http://store.company.com/dir2/other.html) 同源只有路徑不同 * [http://store.company.com/dir/inner/another.html](http://store.company.com/dir/inner/another.html) 同源只有路徑不同 * [https://store.company.com/secure.html](https://store.company.com/secure.html) 跨域不同協議 ( https 和 http ) * [http://store.company.com:81/dir/etc.html](http://store.company.com:81/dir/etc.html) 跨域不同端口 ( http:// 80 是默認的) * [http://news.company.com/dir/other.html](http://news.company.com/dir/other.html) 跨域不同域名 ( news 和 store ) Cookie 是同源共享的，不可以跨域訪問的。 # Cookie 操作封裝 ~~~ var Cookie = { ? ?getCookie : function(key) { ? ? ? ?// 先把字符串轉換為數組 ? ? ? ?var keyValues = document.cookie.split('; '); ? ? ? ?var value; ? ? ? ?// 遍歷數組 ? ? ? ?keyValues.forEach(function (ele) { ? ? ? ? ? ?var keyValue = ele.split('='); ? ? ? ? ? ?if(key == keyValue[0]){ ? ? ? ? ? ? ? ?value = keyValue[1]; ? ? ? ? ? ? ? ?return; // 找到結束循環 ? ? ? ? ? } ? ? ? }) ? ? ? ?return value; ? }, ? ?setCookie : function(key, value, day) { ? ? ? ?if(arguments.length == 3) { ? ? ? ? ? ?var date = new Date(); ? ? ? ? ? ?date.setDate(date.getDate() + day); ? ? ? ? ? ?document.cookie = key + '=' + value + '; expires=' + date; ? ? ? }else { ? ? ? ? ? ?document.cookie = key + '=' + value; ? ? ? } ? }, ? ?removeCookie : function(key) { ? ? ? ?this.setCookie(key, '', -1); ? }, ? ?getKeys : function () { ? ? ? ?var keyValues = document.cookie.split('; '); ? ? ? ?return keyValues.map(function(keyValue){ ? ? ? ? ? ?return keyValue.split('=')[0]; ? ? ? }); ? }, ? ?clearCookie : function() { ? ? ? ?var keys = this.getKeys(); ? ? ? ?keys.forEach(function(key){ ? ? ? ? ? ?Cookie.remove(key); ? ? ? }); ? } } ~~~ # 工作流程首先必須明確一點，存儲 Cookie 是瀏覽器提供的功能。Cookie 其實是存儲在瀏覽器中的純文本，瀏覽器的安裝目錄下會專門有一個 Cookie 文件夾來存放各個域下設置的 Cookie。當網頁要發 HTTP 請求時，瀏覽器會先檢查是否有相應的 Cookie（同源），有則自動添加在請求頭中的 cookie 字段中。這些是瀏覽器自動幫我們做的，而且每一次 HTTP 請求瀏覽器都會自動幫我們做。存儲在 Cookie 中的數據，每次都會被瀏覽器自動放在 HTTP 請求中，如果這些數據并不是每個請求都需要發給服務端的數據，瀏覽器這設置自動處理無疑增加了網絡開銷；但如果這些數據是每個請求都需要發給服務端的數據（比如身份認證信息），瀏覽器這設置自動處理就大大免去了重復添加操作。所以對于那設置“每次請求都要攜帶的信息（最典型的就是身份認證信息）”就特別適合放在 Cookie中，其他類型的數據就不適合了。 ~~~ // 客戶端代碼 document.cookie = 'age=18; path=/'; ? var xhr = new XMLHttpRequest(); xhr.open('get', 'url', true); ? xhr.onload = function () { ? ?if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) ? { ? ? ? ?console.log("成功" + xhr.responseText); ? } } xhr.send(); ~~~ ~~~ // 服務端代碼 // 獲取 Cookie 數據 const express = require('express'); const path = require('path'); let app = express(); ? app.use('/static', express.static(path.join(__dirname,'static'))); ? app.get('/a', (req, res) => { ? ?console.log(req.header('Cookie')); ? ?res.send('XX'); }) ? app.listen(8888, ()=> console.log('啟動成功')); ~~~