學習筆記 | 瀏覽器儲存空間:Cookie、LocalStorage 和 SessionStorage

閱讀時間約 4 分鐘


之前在 學習筆記 | 關於 Cookie、Session、Token 這篇筆記有提到,瀏覽器需要帶著使用者的身分訊息或經過身分驗證後取得的Token(令牌),才能向伺服器請求資源,那麼瀏覽器就必須有個空間來儲存這些 Token 資訊,這篇就是要來記錄瀏覽器常見的儲存空間啦~

在 Chrome 的開發者工具內找到 Application,就可以看到瀏覽器的儲存空間 Storage 了,這篇主要記錄最常用的三種:Cookie、LocalStorage 和 SessionStorage

Cookie

Cookie 是小型文字檔,有以下特性:

1. 可以設定失效時間

2. 夾帶在 header 裡,會隨著網路請求一起發送到 server 端

3. 大小約 4kb(儲存量偏小)

4. 操作方式只有一種,所有的新增修改刪除都是同樣寫法

document.cookie = "name=Andy"  // 新增一個cookie 
document.cookie // 讀取全部cookie
document.cookie = "name=;" // 移除name之cookie

Storage

LocalStorage 和 SessionStorage 的概念基本都是相同的,特性是:

1. 大小預設有 5mb,實際會依照瀏覽器不同而有所差異

2. 儲存字串資料,其他類型可用 JSON.stringify()存入,用JSON.parse()取回

3. 無痕或隱私模式下無法讀取

而兩者最大區別在於:

  • LocalStorage 如果不手動刪除就會一直保留在瀏覽器內
  • SessionStorage 僅會存在當前的頁面,如果關閉瀏覽器或重新整理,資料就會被清除

LocalStorage 和 SessionStorage 的操作也相同,都是以key/value 的方式進行CRUD,這邊就以 LocalStorage 進行操作:

  • 存取/修改 setItem()
localStorage.setItem(key,vale)
// key 相當於屬性名稱,value 則是我們要存入的值

ex:
localStorage.setItem('token','123456')
  • 讀取 getItem()
localStorage.getItem(key)
// 讀取時就調用我們先前存入的 key,此時若 Storage 內沒有資料,會回傳 null

ex:
localStorage.getItem('token') // '123456'
  • 清空 removeItem() / clear()
localStorage.removeItem(key)  // 刪特定資料
localStorage.clear() // 清空所有資料,此時若 Storage 內沒有資料,會回傳 undefined

ex:
localStorage.removeItem('token')

最後,使用瀏覽器儲存空間要注意的是「安全性問題」,由於這些存取空間只要打開開發者工具就能看到,像 LocalStorage 如果沒有清空,就毫無安全性可言,任何人都可以對其進行修改,使用上務必謹慎!


另外有個小小備註,一開始初學的我認為 SessionStorage 跟 先前的筆記中的 session 是同樣的,所以一直無法理解,後來才發現,原來它們是完全不同的呀!SessionStorage 是瀏覽器端的儲存空間,而 session 則是伺服器端用來儲存使用者狀態的機制,雖然名稱很像但功能不一樣呢😯


參考資料:
Cookie、LocalStorage、SessionStorage 差異
網頁資料儲存 — cookie、local Storage、Session Storage


我是Amber,前端學習中,歡迎交流討論🧸

20會員
19內容數
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
學習筆記(3)|美國零售銷售 X 新訂單庫存 X 加密貨幣財經M平方的2022年總經論壇學習,就所聽的內容繼續延伸、挖掘、佐證。
Thumbnail
avatar
TALF宅
2022-07-01
閱讀筆記《心像練習:解鎖心流、超越天賦的致勝心理學》★研究證實,心像(腦中預演)能帶來超水準表現,幾乎所有領域的頂尖人物都有清晰的心像。他們過的是「逆向生活」,先創造一個未來,讓自己身在其中,接著進入心流,專心致志實現那一種未來。 ●有些運動員和參與者,會把自己人生中最完美的一天,描述為「playing in the zone─進入心流」。
avatar
偶希都理
2022-04-28
學習筆記♥飲食大亂鬥因為當年看書找資料的時候很希望能有這樣的大致整理文,專門針對飲食方面,列一下大概特色,這樣以後要跟人解釋分享的時候多好用啊! 主要以生酮、全植物蔬食、自然療法/自然醫學、原始點、古中醫這幾個我自己確實實驗過並且在短期或長期真正有帶來幫助的為主。
Thumbnail
avatar
鈴瀧編
2021-07-13
學習筆記 | Google UX Design課程第一堂-設計衝刺 我是設計方面0經驗的新人,在這堂課上獲益良多 目前在Google UX Design課程上了一陣子,已經上到第五課 (持續努力中💪🏻) 想藉由發文寫下學習筆記,讓自己在整理內容的時候再次吸收! 後續會陸續寫下所學到的內容,歡迎各位一同交流🙌🏻😊 - 做為第一篇文章 想先分享第一堂課所提及
Thumbnail
avatar
Vivi
2021-06-11
學習筆記| 什麼是科技管理? Management of Technology|管理科技 2020年9月6日,我冠上了一個新的身份,高雄市立空中大學學生的身份,朋友問我,我選修什麼科系,我回答「科技管理」。不少人感到困惑,這是什麼樣的科系,或者直覺認為這是有關資工、資管、資處方面的學系。 其實原先我也不了解,直到我開始了我第一門專業基礎必修課「科技管理」,在導師吳欣穎系主任的講解下,慢
Thumbnail
avatar
莊凱仲 Ivan
2021-04-19
學習筆記|肌能系貼紮技術 — 基本介紹 (2020/12/16 @陽交大運動傷害防護社)前言:大學時期因為熱衷於打桌球,取捨之下放棄參加了同時段的運動傷害防護社。但隨著在日常生活中用到肌貼協助親友解決疼痛的機會越來越高,加上自己也更想了解物理治療於運動傷害的應用,決定趁著研究所能盡量參與,多少加強自己貼紮的技術。
Thumbnail
avatar
Kenny Wang
2021-03-23
學習筆記 |人脈的秘密-Accupass訪談歐陽立中老師把握弱連結,創造人脈致勝關鍵這標題商業的可以,但是聽了之後你會覺得,歐陽老師的講座既有乾貨也有雞湯,講得是人脈,卻有很多實用的做人處事智慧。
Thumbnail
avatar
呂明熹Jessie(言酒)
2020-12-09
學習筆記-足部作圖法 用途 找到三個足弓,可用來決定以「舒適」(非矯正)為目的的墊片應該怎麼墊。也可用在高跟鞋的修飾上。 步驟 畫出足部輪廓 點出5th MTP Base與外側足弓高點 點出5th MTP head的頂點、遠點、近點 點出舟狀骨頂點與內側足弓軟組織高點 點出1st MTP head
Thumbnail
avatar
洪岳裕
2019-05-05