JT's Blog

Do the right things and do the things right.

Cookies and Sessions

| Comments

Cookies (Session cookies)

因爲 HTTP 協定是無狀態(Stateless)，所以 server 端無法得知使用者在前端的操作，因此設計 cookie 來解決這個問題。

目的：

  • 管理session：例如：使用者是否登入，購物車明細
  • Personalization：使用者個人設定
  • Tracking：分析使用者習慣

特性：

  • 儲存在 client 端瀏覽器
  • http header 裡面其中一個欄位
  • key / value 的形式儲存
1
2
3
4
5
6
7
8

# http header sample

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

[page content]
  • 檔案大小最多 4Kb
  • 以明文的方式在網際網路上傳輸及在 Client 端電腦儲存，不建議儲存敏感資料
  • Expired 設定生命週期
  • Domain 設定可存取此cookies 的domain，屬性Path 會辨識 URL 必須存在request resource

Tips

  • 使用javascript 移除cookie
1
2
3
4

function delete_cookie( name ) {
  document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
delete_cookie('yummy_cookie');

Sessions

  • 儲存在 server 端
  • session 需要搭配 cookie 才能產生運作
  • server 會傳送帶有 session id 的 cookie 給 client，當下一個 request 及cookie 再被送至 server 端時，會用 cookie 中的 session id 來辨認每個使用者所儲存的狀態與 data。
  • 相對於 cookies，session 多用來儲存敏感的資料，也常常成為攻擊的目標 Session Hijacking

Web Stroage

  • HTML5 的 Web Storage 是一種可讓網頁將資料儲存於本地端的技術，其作用如同 cookie
  • 儲存於 Web Storage 中的資料，是以 key-value pair 的形式保存（同 cookie）。
  • Cookie 儲存空間很小，最多僅能儲存 4 KB 的資料。
  • HTML5 Web Storage 的儲存空間則大得多，且依各家瀏覽器的實作而不同。一般應該至少有 5 MB 的空間。
  • 儲存於 cookie 中的資料會在用戶端瀏覽器與伺服器之間旅行（每次瀏覽器送出 request 至伺服器時就會夾帶 cookies），Web Storage 則不會（純粹運作於用戶端）。這表示 Web Storage 不會占用網路頻寬。
  • Web Storage 分為兩種：local storage 和 session storage

Local Storage

  • window properties
  • 資料永久保存
  • 分頁、瀏覽器都使用同一個 localStorage，依據同源政策，只有同個網址才能使用同一個 localStorage
1
2
3
4
5

# set
window.localStorage.setItem('myCat', 'Tom');

# remove
window.localStorage.removeItem(key);

Session Storage

  • window properties
  • 分頁或瀏覽器關閉 sesstionStorage 就會被清除
  • 不同分頁有不同的 sesstionStorage
1
2
3
4
5
6
7
8
9
10
11

# Save data to sessionStorage
sessionStorage.setItem('key', 'value');

# Get saved data from sessionStorage
var data = sessionStorage.getItem('key');

# Remove saved data from sessionStorage
sessionStorage.removeItem('key');

# Remove all saved data from sessionStorage
sessionStorage.clear();

Local Storage vs. Session Storage

  • sessionStorage 在瀏覽器關閉時就會消失
  • localStorage 沒有失效時間，但也要注意避免儲存太多資料到 localStorage

Cookies and Sessions in Rails

Sessions

1
2
3
4
5
6
7
8

# create/update sessions
session[:token] = "GDYPN+N/MIK1FO4M+1D1/A=="

# delete session
session[:token] = nil

# reset session
reset_session

Cookies

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# create/update cookies
cookies[:hits] = @post.hits

# create and expired cookies
cookies[:hits] = {
    value: @post.hits,
    expiress: 4.hours.form_now,
    domain: "www.domain-name.com"
}

# delete
cookies.delete(:hits)

# encryption cookies
cookies.signed[:token] = "GDYPN+N/MIK1FO4M+1D1/A=="

# permanent cookies
cookies.permanent[:hits] = @post.hits

local storage

local storage has nothing to do with rails. So just write javascript to call it.

1
2
3

<script>
localStorage.setItem("company_id", "<%= @company.id %>");
</script>

Reference

Comments