【前端新手日記】前端儲存資料好幫手!Web Storage & Cookie差異是什麼?

--

我們在了解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 比一比
最後再來比較一下它們各自的特點~
以下整理了一個圖表,給大家參考

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

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

--

--

文科少女學程式
文科少女學程式

Written by 文科少女學程式

一名畢業於韓文系的少女,因為想挑戰自我,而踏上程式語言的學習之路,最後不小心成為前端工程師,進入了更深的前端學習世界。

No responses yet