資訊專欄INFORMATION COLUMN
摘要：獲取數據，將鍵值傳入，即可獲取到對應的值。刪除單個數據，根據鍵值移除對應的信息。存儲文件夾用戶名用戶名瀏覽器窗口關閉后數據被銷毀。存儲量小安全性差數據操作接口不友好，而存儲量較大安全性較高數據接口友好。
在前端日常開發中 cookie、webStorage 是我們常用的瀏覽器緩存方式。但同時說起 cookie、session、sessionStorage 和 localStorage 是不是有些傻傻分不清楚了？本文梳理概括了它們的區別及應用場景，相信對你的面試和實際應用都有一定幫助。
cookie由服務端生成，保存在客戶端（由于前后端有交互，所以安全性差，且浪費帶寬）
存儲大小有限（最大 4kb )
存儲內容只接受 String 類型
保存位置：
若未設置過期時間，則保存在 內存 中，瀏覽器關閉后銷毀
若設置了過期時間，則保存在 系統硬盤 中，直到過期時間結束后才消失（即使關閉瀏覽器）
數據操作不方便，原生接口不友好，需要自己封裝
應用場景
判斷用戶是否登陸過網站，以便下次登錄時能夠實現自動登錄（或者記住密碼）
保存登錄時間、瀏覽次數等信息
設置了過期時間的cookie存在了哪里呢？session
Mac: /Users/用戶名/Library/caches/Google/Chrome/Default/cache
Windows: C:Users用戶名AppDataLocalMicrosoftWindowsTemporary Internet Files
是后端關心的內容，依賴于 cookie（sessionID 保存在cookie中）
保存在服務端
存儲大小無限制
支持任何類型的存儲內容
保存位置：服務器內存，若訪問較多會影響服務器性能
webStoragewebStorage 是 html5 提供的本地存儲方案，包括兩種方式：sessionStorage 和 localStorage。相比 cookie 這種傳統的客戶端存儲方式，webStorage 有許多優點：
保存在客戶端，不與服務器通信，因此比 cookie 更安全、速度更快
存儲空間有限，但比 cookie 大（5MB)
僅支持 String 類型的存儲內容（和 cookie 一樣）
html5 提供了原生接口，數據操作比 cookie 方便
setItem(key, value) 保存數據，以鍵值對的方式儲存信息。
getItem(key) 獲取數據，將鍵值傳入，即可獲取到對應的value值。
removeItem(key) 刪除單個數據，根據鍵值移除對應的信息。
clear() 刪除所有的數據
key(index) 獲取某個索引的key
持久化的本地存儲，瀏覽器關閉重新打開數據依然存在（除非手動刪除數據）。
應用場景：長期登錄、判斷用戶是否已登錄，適合長期保存在本地的數據。
存儲文件夾：
Mac: /Users/用戶名/Library/Application Support/Google/Chrome/Default/Local Stroage
Windows: C:Users用戶名AppDataLocalGoogleChromeUser DataProfileLocal Storage
瀏覽器窗口關閉后數據被銷毀。
應用場景：敏感賬號一次性登錄。
總結綜上所述，我們可以知道，cookie 和 webStorage（ localStorage、sessionStorage ）是前端工程師關心的內容，session 是后端關心的內容。
cookie 存儲量小、安全性差、數據操作接口不友好，而 webStorage 存儲量較大、安全性較高、數據接口友好。
若要持久的存儲方式，推薦使用 localStorage
若要一次性會話的存儲，推薦使用 sessionStorage
看完有收獲嗎？喜歡請點贊支持哦~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96366.html
摘要：不是很安全，別人可以分析存放在本地的并進行欺騙，考慮到安全應當使用。因此不是一種持久化的本地存儲，僅僅是會話級別的存儲。用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。 前言 總括：詳細講述Cookie,LocalStorge,SesstionStorge的區別和用法。 人生如畫，歲月如歌。 原文博客地址：Javascript本地存儲小結 知乎專欄&&簡書專題：前端...
摘要：那要是被刪了呢那沒辦法了，只能重新登陸，意味著重新提交重新分配隨機數。它是一個哈希，作用就是字面意思，本地存儲，只不過這里的本地指的是瀏覽器。 標簽可以保留回車和空格等你怎么寫它就怎么展示的內容 cookie cookie可以看作是一種設置，允許瀏覽器在電腦本地硬盤的某一個隱蔽的地方開發一塊存儲空間，用來存放某些特定的內容。 如果在服務器端設置了允許使用cookie，那么，之后瀏覽器每...
摘要：保持狀態保存在瀏覽器端，保存在服務器端存儲的大小單個保存的數據不能超過大小沒有限制。的目的是克服由所帶來的一些限制，當數據需要被嚴格控制在客戶端時，不需要持續的將數據發回服務器。的生命周期是僅在當前會話下有效。 寫在前面 既然是淺談，就不會詳細從底層原理解釋這幾個的區別，就簡單地聊一下，這幾個的區別，優缺點，應用場景 cookie和session 瀏覽器的緩存機制提供了可以將用戶數據存...
摘要：的區別及用法是本地存儲，存儲在客戶端，包括和。僅在當前會話下有效，關閉頁面或瀏覽器后被清除。源生接口可以接受，亦可再次封裝來對和有更好的支持。但需要程序員自己封裝，源生的接口不友好。每個最多只能有條，每個長度不能超過。 localStorage、sessionStorage、Cookie的區別及用法 showImg(https://segmentfault.com/img/bVYLlH...
閱讀 3969·2021-11-23 10:09
閱讀 1338·2021-11-23 09:51
閱讀 2939·2021-11-23 09:51
閱讀 1585·2021-09-07 09:59
閱讀 2354·2019-08-30 15:55
閱讀 2292·2019-08-30 15:55
閱讀 2949·2019-08-30 15:52
閱讀 2560·2019-08-26 17:04
