Louis's blog
GitHub
GitHub
  • 瀏覽器運作原理
  • 閉包
  • this
  • arguments 和 array-like
  • apply、call、bind
  • 函式程式設計
  • 物件和原型
  • 原型鏈和繼承
  • ES6 和 Class
  • ES6 中新增的數據類型
  • ES6 語法糖
  • var、let、const
  • ES7~ES12
  • Strict Mode
  • 補充
  • Proxy 和 Reflect
  • Promise
  • Iterator
  • 生成器
  • async、await
  • Event loop
  • 錯誤處理
  • 模塊化
  • 套件管理工具
  • JSON
  • WebStorage
  • IndexDB
  • Cookie
  • BOM
  • DOM
  • 防抖(debounce)和節流(throttle)
  • Deep copy
  • 事件總線

Cookie

Cookie,類型為小型文件文件,某些網站為了識別用戶申份而儲存在用戶本地終端(Client Side)上的數據,瀏覽器會在特定情況下攜帶 cookie 發送請求,服務器可以通過 cookie 來獲取一些信息。

Cookie 儲存在客戶端中,按在客戶端中的儲存位置,可分為記憶體 Cookie 和硬碟 Cookie。

記憶體 Cookie 由瀏覽器維護,儲存在記憶體中,瀏覽器關閉即消失,存在時間短暫。硬碟 Cookie 儲存在硬碟裡,有過期時間,除非使用者手動清理或到了過期時間,硬碟 Cookie 不會清除,存在時間較長。所以,按存在時間,可分為非持久 Cookie 和持久 Cookie。

基本使用

透過 express 這個 web 框架可以輕鬆的管理 cookie:

const express = require('express')

const app = express()

// 首頁,讀取cookie
app.get('/home', function (req, res) {
  const { name, age } = req.headers.cookie
    ? req.headers.cookie.split(';').reduce((res, item) => {
        const data = item.trim().split('=')
        return { ...res, [data[0]]: data[1] }
      }, {})
    : {}
  res.send(`Hello ${name}, you're age is ${age}`)
})

// 登入,註冊cookie
app.get('/login', function (req, res) {
  // 建立cookie,值為字串
  res.cookie('name', 'Louis', { expires: new Date(Date.now() + 900000), httpOnly: true })
  res.cookie('age', '26', { expires: new Date(Date.now() + 900000), httpOnly: true })

  res.send('已註冊cookie')
})

// 退出,清除cookie
app.get('/exit', function (req, res) {
  res.clearCookie('name')
  res.clearCookie('age')
  res.send('已清除cookie')
})

app.listen(5000)

cookie 的常見屬性

cookie 的生命週期

默認情況下 cookie 是記憶體 Cookie,也就是在瀏覽器關閉時會自動被刪除,可以透過參數 expires 或 max-age 來設置過期時間:

  • expires:設置的事 Date.toUTCString,設置格式是 ;expires=date-in-GMTString-formate;
  • max-age:設置過期秒鐘 ;max-age=max-age-in-secondes (例如一年為 60*60*24*365)

cookie 的作用域

  • 如果不指定 domain,默認為 origin,不包含子域名,如果指定 domain 則包含子域名。如果設置 Domain=mozila.org,則 cookie 也包含在子域名中(如:developer.mozila.org)。

  • 如果不指定 path,默認為所有路徑。如果設置 Path=/docs,則會匹配所有 /docs 下的路徑,如:/docs、/docs/web、/docs/web/123

瀏覽器中操作 cookie

在 cookie 中有一個屬性為 httpOnly,當其為 true 時便不可以透過 JavaScript 進行操作,所以要設置為 false。

const express = require('express')

const app = express()

app.get('/', function (req, res) {
  res.cookie('name', 'Louis', { expires: new Date(Date.now() + 900000), httpOnly: false })

  res.send('已註冊cookie')
})

app.listen(5000)

要將 cookie 刪除必須對 max-age 進行設置:

document.cookie = 'name=louis;max-age=0'

cookie 的缺點

  • cookie 會附加在每一次請求頭中,無形中增加了流量
  • cookie 在 headers 中是被明文傳輸的
  • 大小限制只有 4kb
Edit this page
Last Updated:
Contributors: louis, louis61619
Prev
IndexDB
Next
BOM