傑瑞的技術日記

你今天前端了嗎？

Express Cookie 介紹

發表於 更新於 分類於 ， ，
Cookie 為一個能夠儲存資料在瀏覽器的小型資料庫且能夠在 client 端 和 server 端讀取和寫入...

Cookie 為一個能夠儲存資料在瀏覽器的小型資料庫且能夠在 client 端 和 server 端讀取和寫入

首先可以先試著打開 google 搜尋首頁，試著輸入

1
document.cookie

就會撈出一些可以撈的 cookie 資訊，一些不能撈的通常都會是 httpOnly 不能透過 JS 去撈取
這也是資安的關係

通常寫入 cookie 會如下:

1
document.cookie="myName=John"

這時候在 cookie 看，就會多一則 myName 的資訊

有時候會希望 cookie 放的內容，有時效性
這時候可以這樣寫:

1
2
3
4
document.cookie="myName=John; expires=GMT時間字串;"

// expires 內放的是 GMT 時間字串
// 可以用 new Date().toGMTString() 來查詢

另外一個寫法是，假設想要 10 秒過後失效:

1
document.cookie="myName=John; max-age=10;"

變成是 max-age 屬性

用 express-generator 快速產生一個專案後，會發現裡面有一個 cookie-parser 的套件可以做使用
它是用來解析 cookie 的工具
在 index.ejs 寫入 cookie:

1
document.cookie = "testConsole=TEST"

在 routes/index.js 接收:

1
2
3
4
router.get('/', function(req, res, next) {
  console.log(req.cookies)
  res.render('index', { title: 'Express' });
});

頁面刷新後，就會發現 console 把前端撰寫的 cookie 給帶回來後端了
如果今天反過來，想要從後端把資料帶進去 cookie 給前端呢？
一樣在 routes/index.js 撰寫，只不過這次是透過 res 下去寫:

1
2
3
4
5
6
7
8
9
10
router.get('/', function(req, res, next) {
  // res.cookie('屬性', '值', {})
  res.cookie('test', 'TEST', {
    // maxAge 為幾秒後消失，1000 為一秒
    maxAge: 1000*100,
    // 當 httpOnly 為 true 時，用戶不可透過 JS 撈取此 cookie
    httpOnly: true
  })
  res.render('index', { title: 'Express' });
});

這個時候可以在 index.ejs 的 cookie 就可以看到從後端傳過來的 cookie 資訊