1. 程式人生 > >本地儲存(一)—— Cookie、SessionStorage和LocalStorage詳解

本地儲存(一)—— Cookie、SessionStorage和LocalStorage詳解

目錄

1. Cookie

2. Web Storage

2.1 Session Storage

2.2 Local Storage

2.3 Web Storage 的瀏覽器支援情況

3. Cookie、SessionStorage和LocalStorage的對比


Cookie、SessionStorage和LocalStorage:瀏覽器的快取機制提供的可以將使用者資料儲存在客戶端上的方式,常用於儲存 web 頁面的使用者資訊等資料。

1. Cookie

最早的時候 Cookie 的出現是為了解決 HTTP 的狀態管理問題。

由於 HTTP 是無狀態協議

,它不對之前發生過的請求和響應的狀態進行管理,這就導致了無法根據以前的狀態來進行本次請求的處理。然而,很多情況下(比如使用者登入後訪問網站),由於 HTTP 無法記錄之前的狀態,所以跳轉頁面之後就需要重新登入,或者在每一次的請求中新增用以判斷使用者身份的引數資訊,以此來管理登入狀態。

為了解決這個問題,就引入了Cookie。

* 需要注意的是,

(1) 同一個域名下的所有請求,都會攜帶 Cookie這就造成了一個問題,如果我們儲存了過多的Cookie會帶來巨大的效能浪費。隨著請求的疊加,一些不必要的 Cookie 帶來的開銷將是無法想象的。

(2)Cookie 的儲存大小最大隻能有 4KB。當 Cookie 超過 4KB 時,將會被裁切,只能用來存取少量的資訊。

2. Web Storage

Web Storage 是 HTML5 專為瀏覽器儲存而提供的資料儲存機制。它又分為 Local Storage 與 Session Storage,允許在瀏覽器中儲存 key/value 對的資料(儲存資料大小一般都是5MB)。

2.1 Session Storage

sessionStorage 用於臨時儲存同一視窗(或標籤頁)的資料,在關閉視窗或標籤頁之後將會刪除這些資料。

(1)儲存資料大小為 5MB;

(2)只能儲存字串型別的物件(若要儲存物件,需要轉換為JSON字串);

(3)sessionStorage 僅在當前會話下有效,不同頁面或標籤頁間無法共享sessionStorage的資訊

         需要注意的是: sessionStorage引入了一個“瀏覽器視窗”的概念,sessionStorage是在同源的視窗中始終存在的資料。只要這個瀏覽器視窗沒有關閉,即使重新整理頁面或者進入同源另一個頁面,資料依然存在;關閉了瀏覽器視窗後就會被銷燬。上述頁面及標籤頁僅指頂級視窗,如果一個標籤頁包含多個iframe標籤且他們屬於同源頁面,那麼他們之間是可以共享sessionStorage的。

2.2 Local Storage

LocalStorage 用於長久儲存整個網站的資料,儲存的資料沒有過期時間,直到手動去刪除。

(1)LocalStorage 可以將第一次請求的資料直接儲存到本地,這個相當於一個 5M 大小的針對於前端頁面的資料庫,相比於 cookie 可以節約頻寬。

(2)只能儲存字串型別的物件(若要儲存物件,需要轉換為JSON字串);

(3)localStorage在瀏覽器的隱私模式下面是不可讀取的。

(4)相同瀏覽器的不同頁面間可以共享相同的 localStorage(同源頁面),不同的網站直接是不能共用相同的 localStorage;

(5)localStorage生命週期是永久性的,沒有過期時間,直到手動去刪除。

2.3 Web Storage 的瀏覽器支援情況

3. Cookie、SessionStorage和LocalStorage的對比