測試角度分析cookie、localstorage和sessionstorage

阿新 • • 發佈：2019-01-29

作為前端測試對於前端的一些基本的知識需要有一定的積累，不然測試的時候總是一頭霧水。下面來總結一下cookie、localstorage和sessionstorage的概念、區別、應用場景。基本概念 Cookie cookie主要是用來儲存使用者的登入資訊的，這些資訊通常是經過加密的。cookie一般是由伺服器端生成然後存在瀏覽器中的。因為HTTP協議是無狀態的，所以伺服器不知道使用者上一次做了什麼，有了cookie，伺服器可以設定和讀取cookie中的資訊來維護使用者跟伺服器會話中的狀態。 cookie的翻譯是小甜餅，確實，cookie是比較小的，它的大小限制在4KB左右。因為cookie資料會一直在同源的http請求中攜帶，就算這些資訊是沒有用的也會在請求中。所以cookie是要在瀏覽器和伺服器之前來回傳遞的，所以它肯定不能太大。

瀏覽器端生成的cookie有一定長度的有效期，在有效期時間內它是一直存在瀏覽器中的，即使關閉瀏覽器，它仍然存在。 Localstorage localstorage和sessionstorage都是在HTML 5之後提供的新的客戶端儲存資料的方法。 localstorage是沒有時間限制的資料儲存，就是說，如果資料存在localstorage中只要不清除瀏覽器儲存的資料，它將一直存在於瀏覽器中。 localstorage是專門用於客戶端儲存資料的，所以它不會強制攜帶在客戶端的請求中。因此它的資料大小限制也沒有cookie那麼嚴格，localstorage的大小限制為5M左右。

Sessionstorage sessionstorage和localstorage有點相似，但是它和localstorage的生命週期不一樣，它只在當前會話儲存在瀏覽器中，當會話結束它就被清除了。這樣說可能比較抽象，簡單說就是關閉瀏覽器之後，儲存在sessionstorage中的資料都將被清除。 sessionstorage也主要用於客戶端儲存資料，它不會被強制攜帶在客戶端的請求中。它的大小也被限制在5M左右。下面用一個表格來梳理一下：

特性	Cookie	localStorage	sessionStorage
資料的生命期	一般由伺服器生成，可設定失效時間。如果在瀏覽器端生成Cookie ，預設是關閉瀏覽器後失效	除非被清除，否則永久儲存	僅在當前會話下有效，關閉頁面或瀏覽器後被清除
存放資料大小	4K左右	一般為5MB
與伺服器端通訊	每次都會攜帶在HTTP頭中，如果使用cookie儲存過多資料會帶來效能問題	僅在客戶端（即瀏覽器）中儲存，不參與和伺服器的通訊

應用場景

cookie大家應該相對熟悉一些，主要是用來儲存中使用者的資訊的。主要驗證的點可能是對應cookie值的有效期是否正確。下圖中是cookie的有效期限，可以通過這個來驗證。

上圖中Expires/Max-Age欄位就是用來記錄cookie的有效時間的。上圖中圈出的就是使用者密碼儲存的時間10天。

Localstorage

localstorage主要用來儲存和當前裝置有關的一些資料，比如：首次進入的引導提示、使用者在未登陸狀態讀過的書等

如上圖，guide_showed=1是用來記錄首次進入閱讀器首頁的引導浮層已經出現過了，以後都不會再出現。YUEDU163_READLOG是用來記錄在當前裝置當前瀏覽器中使用者閱讀過的書籍。

Sessionstorage

sessionstorage主要用來儲存每次會話都會展示的東西，比如：廣告，本次我把廣告推廣關閉了，然後關閉瀏覽器，下次再進來這條廣告還會再出現。

測試角度分析cookie、localstorage和sessionstorage

測試角度分析cookie、localstorage和sessionstorage

瀏覽器儲存之Cookie、LocalStorage 和 SessionStorage的區別詳解

Cookies、localStorage和sessionStorage三者之間的區別.md

cookie、LocalStorage 與 SessionStorage三者的區別

JS中 Cookie、 LocalStorage 與 SessionStorage

JS 詳解 Cookie、 LocalStorage 與 SessionStorage

JavaScript Cookie、 LocalStorage 與 SessionStorage

sessionStorage 、localStorage 和 cookie 之間的區別

Cookie、session和localStorage、以及sessionStorage之間的區別

cookie、localStorage、sessionStorage的有效期和作用域

sessionStorage、localStorage和cookie

【總結】Cookie、session和localStorage、以及sessionStorage之間的區別

Cookie localStorage和SessionStorage比較

Cookie、Session和LocalStorage

cookie、localStorage、sessionStorage

cookie、localStorage、sessionStorage的區別

瀏覽器端資料儲存之Cookie、localStorage、sessionStorage

淺談瀏覽器存儲（cookie、localStorage、sessionStorage）

localStorage和sessionStorage總結以及區別

web存儲機制（localStorage和sessionStorage）

測試角度分析cookie、localstorage和sessionstorage

相關推薦