伺服器傳送給使用者瀏覽器的資料，通常被用來驗證使用者的登入狀態，每次 request 時都會帶上。主要用於購物車，下次購買訂單記錄。

能儲存資料在瀏覽器上的小型資料庫(4k)
傳送時以明碼傳送，機密資料不建議以此方式儲存
能在 client(瀏覽器)、server(後端程式)進行讀取、寫入
key / value 組成，並由分號跟空格來隔開
每次 request 時都會帶上
可設定失效時間，在時間過後消失。預設是關閉瀏覽器後失效
session data 並不會儲存在 cookie 裡，cookie 存的是 sessionID
chrome 開發人員工具的 Application 可看到

欄位介紹

Name: 鍵(key)
Value: 值(value)
Domain: 取得該 Cookie 的網域
expires: 限制 Cookie 的有效時間
max-age: 存在時間
path: 設定可以存取該 Cookie 的路徑
secure: 設定 Cookie 是否要 https 網址才可傳送

瀏覽器端寫法

讀取

瀏覽器下的 console 輸入 document.cookie

document.cookie = “myName=tom”;

document.cookie=”username=bob; expires=Mon, 04 Dec 2017 08:18:32 GMT; path=/“;

GMT 時間

new Date().toGMTString()

document.cookie=”username=bob; max-age=10; path=/“;

伺服器端(Node.js)

npm install cookie-parser --save

res.cookie(name, value [, options]);

req.cookies.yourCookieName;

Session

會在用戶完成身分認證後，存下、用戶資料，然後產生一組對應的 id，存入 cookie 後傳回用戶端。例如餐廳點餐後，拿到號碼牌，餐廳可以透過號碼牌來識別點餐者資訊。通常應用於網站計數器，登入驗證…等等。

儲存在伺服器的暫存資料，可放在記憶體或資料庫上
session 可在 cookie 上儲存識別身份的 sessionID
不會自動失效，除非超過設置的失效時間

express-session option 介紹

name：在 response 中，設定的 sessionID cookie name。預設是 connect.sid
proxy：代理伺服
resave：強制將 session 存回 session store 。預設是 true
rolling：強制在每一次回應時，重新設置一個 sessionID cookie。到期, 將重置為原始 maxAge, 重新計數時效性
saveUninitialized：強制將未初始化的 session 存回 session store，若它是新的且未被修改
store：在 server 端的存放方式，預設 memory
cookie：設定 sessionID 的 cookie 相關選項。其選項跟 cookie 欄位介紹一樣。預設 { path: ‘/’, httpOnly: true, secure: false, maxAge: null }
secret(必要選項)：用來簽章 sessionID 的 cookie, 可以是一個字串或是多個字串組成的一個陣列。

伺服器端(Node.js)

安裝設定

npm install express-session --save

Code

//express-session 設定
app.use(session({
 secret: 'keyboard cat',
 resave: true,
 saveUninitialized: true,
 cookie:{}
// 設定 Cookie 設定
}))

寫入 session

req.session.username = 'tom';

LocalStorage 與 SessionStorage

HTML5 提供兩個 client 端儲存資料的方法。大小預設有 5mb，只在瀏覽器保存，沒有參與 server 溝通。

LocalStorage

適合保存數據、購物車資料。

key / value 組成，value 只有字串型態
不會過期，除非手動清除
跨分頁

建立資料

設定 userName 屬性，值為 bob

localStorage.setItem('userName', 'bob');

取得資料

localStorage.getItem('userName');

刪除資料

localStorage.removeItem('userName');

全部刪除

localStorage.clear();

SessionStorage

只存在瀏覽囂的單一分頁，另開新分頁的話，又是一個新的 sessionStorage。

key / value 組成
預設無逾期時間，分頁或瀏覽器關掉後就會清除

建立資料

設定 userName 屬性，值為 bob

sessionStorage.setItem('userName', 'bob')

取得資料

sessionStorage.getItem('userName');

刪除資料

sessionStorage.removeItem('userName');

ps.上述的瀏覽器儲存區的資料都是以不同網站為單位儲存，網站間無法共享儲存在 Client 端的資料。

JSON 轉換

由於 value 只能存入 String，若要儲存其他類型(object, array…)時，可使用 JSON 來轉換，先將其他類型的資料轉為字串後儲存，要使用時再取出轉回原本格式。

轉換成字串 JSON.stringify

let arrToStr = JSON.stringify(arr);

轉換回原本格式 JSON.parse

let strToArr = JSON.parse(arrToStr);

參考：
https://ithelp.ithome.com.tw/articles/10187464
https://medium.com/@bebebobohaha/cookie-localstorage-sessionstorage-%E5%B7%AE%E7%95%B0-9e1d5df3dd7f
https://dotblogs.com.tw/daniel/2017/04/08/110915
https://ithelp.ithome.com.tw/articles/10203525
https://yakimhsu.com/project/project_w7_storage.html

Cookie

欄位介紹

瀏覽器端寫法

讀取

寫入 Cookie

寫入 Cookie，並加入過期時間

寫入 Cookie，設定 10 秒後失效

伺服器端(Node.js)

安裝解析 Cookie NPM (cookie-parser)

Express 寫入 Cookie，並加入相關設定 (過期時間、httponly、path)

Express 讀取 Client 端 Cookie

Session

express-session option 介紹

伺服器端(Node.js)

安裝設定

寫入 session

LocalStorage 與 SessionStorage

LocalStorage

建立資料

取得資料

刪除資料

全部刪除

SessionStorage

建立資料

取得資料

刪除資料

JSON 轉換