---
# System prepended metadata

title: '[Cookie sessionWeb Storage比較]'
tags: [Cookie session WebStorage]

---

# [Cookie sessionWeb Storage比較]

###### tags:`Cookie session WebStorage`
[[教學] Cookie 是什麼：如何使用 JavaScript 操作 document.cookie](https://www.shubo.io/cookies/)

### 網頁的資料都存在哪裡？為什麼換台電腦購物車就清空了？

換了一台電腦購物車裡的資料就清空了，代表是存在a電腦的瀏覽器裡面，而不是存在後端
|  | Cookie | local storage |session storage |
| -------- | -------- | -------- |-------- |
| capacity容量     | 4kb    | 10mb     |5mb     |
| browsers瀏覽器     | html4/html5     | html5     |html5     |
| acceaaible from接受?     | any window     | any window     |same tab     |
| expires過期?     | manually set手動設置     | never     |on tab close     |
| storage location存儲位置     | browser and server     | browser only     |browser only     |
| sent with requests請求發送?     | yes     | no     |no     |



### Cookie 
一段由Server送給使用者瀏覽器的一小塊資料(文檔)。
==瀏覽器會將使用者資訊儲存下來==，並在下次發送要求的時候將它送回原來的伺服器。
* 非持久Cookie主要是儲存在記憶體 持久Cookie主要是儲存在硬碟
* 儲存空間很小，最多僅能儲存 ==4 KB== 的資料，
* 加重網路流量負擔:儲存於 cookie 中的資料會在用戶端瀏覽器與伺服器之間旅行（每次瀏覽器送出 request 至伺服器時就會夾帶 cookies）
* 所有數據在Client端就可以被修改，數據非常容易被偽造
* 加重網路流量負擔:cookie中數據字段太多會影響傳輸效率
* Cookie提供了狀態保存的功能以==彌補HTTP這個無狀態記錄的通訊協定==
### 最古老的方式：Cookie
Cookie是==瀏覽器可以儲存資訊的地方==,就是個小型文字檔( 限制 4k )
[理解 Session 和 Cookie](https://www.youtube.com/watch?v=lNQAl71Abqc)


當瀏覽器發送 Reqeust 時，會自動帶到 Server 端。而==Server 的 response header 會有一個欄位 Set-Cookie 裡面放著資料==，只要瀏覽器看到這個資料，就會把 Cookie 寫進來。

我們可以用在 client 端用 JavaScript 把資料寫到 cookie 中，當送出 request 時會自動把 cookie 帶到 server 端，而 server 端也可以把資料寫到 response 的 header 中 set-cookie ，傳到 client 端

不同的 doman 會有不同的 cookie，一個 doman 只能儲存 20 個 cookie
Cookie 的功用：辨識身份廣告追蹤身份驗證（通行證）購物車
==打開開發者工具 Application cookie 就可以看到這個 domain 儲存的 cookie==![](https://i.imgur.com/n5mTvGx.png)
Cookie 實務上最常見的作法
由於限制容量小並且大量的資料透過 Cookie 傳輸，==會影響效能==，因此==常見的做法是在 cookie 只存放「能代表使用者是誰的 ID」==，類似通行證一樣，而 Server 端則是儲存此 ID 的資料，當從 client 端發出 request 時，server 端就會回傳這個 ID 相對應的資料，就能辨認身份。

Server 可以在 HTTP response 中回傳 Set-Cookie header 來告訴瀏覽器要設定 cookie。
```
Set-Cookie: [cookie名稱]=[cookie值]
```

### session
每个用户第一次访问服务器后，会自动获得一个Session ID。
如果用户在一段时间内没有访问服务器，那么Session会自动失效，下次即使带着上次分配的Session ID访问，服务器也认为这是一个新用户，会分配新的Session ID。
Session 會在一個用戶完成身分認證後，存下所需的用戶資料，接著產生一組對應的 ID，存入 cookie 後傳回用戶端。 Session泛指有始有終的系列動作/消息，好比會話一般。在登出之前都可以存取資料
* 儲存在伺服器
* Cookie是一張領餐的號碼牌，而Session是一張數位會員卡,紀錄你的餐點細節，消費記錄和點餐喜好，解決Cookie遺失的問題。
* 安全性高

### Web Storage有兩種型態的儲存體:localStorage和sessionStorage
* 儲存在==client端==的磁碟上。
* 一般應該至少有 ==5MB的空間== 。
* 不會在用戶端瀏覽器與伺服器之間旅行（純粹運作於用戶端）。這表示 Web Storage ==不會占用網路頻寬==。
###  最推薦的儲存方式：local storage
打開開發者工具application>local storage
local storage==新開一個分頁還是會有==可以存一些長期的資訊
只能存字串
```htmlmixed=
<body>
  <div class="app"><input class="text" /><button>儲存</button></div>
  <script>
    const oldValue = window.localStorage.getItem("text");//拿值顯示
    document.querySelector(".text").value = oldValue;
    //顯示上次輸入的值
    document.querySelector("button").addEventListener("click", function () {
      const value = document.querySelector(".text").value;
      //alert(value);
      window.localStorage.setItem("text", value);//存進localStorage
    });
    //取得輸入值
  </script>
</body>
```

### 一閃即逝：session storage
打開開發者工具application>session storage
session storage==新開一個分頁就不見了==存一些短暫資訊
只能存字串==分頁關掉值就沒有了==

```htmlmixed=
<body>
  <div class="app"><input class="text" /><button>儲存</button></div>
  <script>
    const oldValue = window.sessionstorage.getItem("text");
    document.querySelector(".text").value = oldValue;
    //顯示上次輸入的值
    document.querySelector("button").addEventListener("click", function () {
      const value = document.querySelector(".text").value;
      window.localStorage.setItem("text", value);
    });
    //取得輸入值
  </script>
</body>
```

### token 登入
產生一個 token => reponse 回給前端
- 前端需要自己儲存這個 token --> localstorage, session storage
- 每一次前端發送需要身份驗正的 request 時，都必須自己帶著這個 token
- 因為 cookie "預設"是無法跨網域讀取的

如果只存在 client 端，那登出會不好做

「後端絕對不可以相信來自前端的東西」


