文科少女學程式

我們在了解HTTP是什麼的時候，有提到HTTP的特性是無狀態，
所以沒辦法紀錄資料。
今天要來看的就是，可以改善無法紀錄資料這部分的好幫手。
廢話不多說，讓我們直接看下去！！！

什麼是Cookie？
Cookie由伺服器產生，產生後會儲存在瀏覽器上，
每次進入產生這個Cookie的伺服器時，都會帶著這組Cookie。

上面的這句話，是不是有點難懂呢？
其實這個狀況其實可以用一個生活情境來比喻~

這個情境中，有間店家會開放顧客成為會員，一旦加入會員，
店家就會給予成為會員的顧客確認會員身分的會員卡，
每次到店家消費時，就必須帶著這個會員卡，
才可以享有會員優惠資格。
=>店家在這裡就等於伺服器，變成會員的顧客則是瀏覽器，而會員卡就是Cookie，
可以辨認會員身分的相關資料都儲存在這張會員卡裡面。

Cookie產生的流程
再來簡單看一下伺服器和瀏覽器溝通往來時產生Cookie的流程
1. 瀏覽器向伺服器發出request
2. 伺服器在response時，傳遞Cookie給瀏覽器
3. 瀏覽器將Cookie儲存起來
4. 再次向相同伺服器發出request時，回傳這組Cookie給伺服器

Cookie的用途
Cookie的常用於認證身分有關的動作，像是帳號登入後，自動記住登入狀態，
還有將商品加到購物車後，轉跳其他頁面後，再回到購物車，依然會顯示原本加入購物車的商品。

Cookie的缺點
1. 容量只有4KB左右，無法儲存太大量的資料。
2. 在伺服器與瀏覽器相通往來時，都會攜帶它，所以若資料太多，會影響效能。
3. 一般Cookie在傳送時，並沒有另外加密，所以會有安全性的問題。

什麼是WebStorage？
WebStorage分成localStorage和sessionStorage兩種。
其實webStorage和Cookie很像，都可以將資料儲存在瀏覽器上，
不過卻補強了原本Cookie容量太小這點，有約5MB的大小，
且在細部內容上，也有一些和Cookie不同的地方。

拿前面類似的生活例子來比較的話，
就會是以下這個情境。

在這個情境中，一樣存在著一個店家，
但是現在主導者變成了顧客自己，顧客因為經常忘記在這間店消費了什麼商品，
所以會自己把購買紀錄放在自己的記帳本裡面。
=>店家在這裡一樣是伺服器，顧客則是瀏覽器，而記帳本就是WebStorage，
紀錄資料這個動作並不是由店家先發起進行的動作，而是由顧客自己進行的，
記帳本裡面的內容，也不會給店家查看。

接著再讓我們從兩種WebStorage來看看差異點在哪裡吧！

localStorage
除非手動刪除，否則可以將資料永久儲存於瀏覽器裡面，
但儲存的資料無法像Cookie一樣，被攜帶到伺服器和瀏覽器溝通的過程中，
只會在本地被使用。

sessionStorage
一樣可以將資料儲存於瀏覽器中，但是資料保存期限只限定在當前頁面中，
移動到別的頁面，或是關閉整個頁面，原本儲存的資料就會被刪除。
也跟localStorage一樣，無法將資料傳送到伺服器。

Cookie & WebStorage 比一比
最後再來比較一下它們各自的特點~
以下整理了一個圖表，給大家參考

呼~這次差不多就這樣啦！
關於這部分的內容，其實還有一些部分自己還沒仔細研究到，
會在之後繼續補充上來~

如果有理解錯的地方，也歡迎大家跟我說喔 :)
先掰餔啦~