# [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 端，那登出會不好做 「後端絕對不可以相信來自前端的東西」