sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web請求之間儲存資料。有了本地資料，就可以避免資料在瀏覽器和伺服器間不必要地來回傳遞。

cookie

cookie在瀏覽器和伺服器間來回傳遞，主要應用場景：

• 保持登入
• 保持上次檢視的頁面
• 瀏覽計數
• 廣告追蹤
• 購物車的狀態保持

Cookies是如何起效的？ 當瀏覽器從web的迴應到頁面請求中接收到一個 Set-Cookie 頭部時Cookies便建立了：

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: page_loaded=25; Expires=Wed, 09 Jun 2021 10:18:14 GMT
 

• 1
• 2
• 3

瀏覽器接收到表明迴應成功的 HTTP 200 程式碼，以及迴應的內容型別。同時也接收到了 Set-Cookie頭部，並建立了一個的cookie：

除非在Wed, 09 Jun 2021 10:18:14前重新整理，否則cookie將在這以後無效並被瀏覽器移除。如果它沒有被終止，在將來所有的該網站的請求中都將攜帶類似的資訊頭部：

GET /spec.html HTTP/1.1
Host: www.example.org
Cookie: page_loaded=25;
 

• 1
• 2
• 3

cookie一直在潛在隱私和安全影響方面有一個壞名聲。他們很容易受到安全問題攻擊影響，例如關鍵攻擊載體的CSRF（Cross Site Request Forgery）,XSS(Cross Site Scripting Attacks) 以及 Session Hijacking 。一個用功且專業的開發者也許不會把很多安全細節資訊放在cookie中，或者實現一系列的方法來減輕可能的這些形式的攻擊。

WebStorage

HTML5引入了Web Storage作為Cookies的替代，這種儲存有兩種型別：local 和 session：

Web Storage 的缺陷

• 資料以簡單字串儲存；操作所需的儲存不同型別的物件，例如booleans，objects，ints和floats。

• 預設5MB儲存限制；如果需要時可有使用者允許獲取更多儲存。

• 可被使用者或者系統管理員禁用

• 複雜資料集合儲存可能很慢

Web Storage 的長處

• App 可以再線上或離線情況下使用

• 擁有簡單好用易學的API

• 能夠對瀏覽器使用事件鉤子，例如offline，online，storage change

• 比cookies更便於管理，沒有額外的的請求頭部資料

• 提供更大的空間以存貯日益劇增的複雜資料

Web Storage API

Web Storage API 簡單易學，它只包含四個方法：

sessionStorage、localStorage、cookie都是在瀏覽器端儲存的資料，其中sessionStorage的概念很特別，引入了一個“瀏覽器視窗”的概念。sessionStorage是在同源的同窗口（或tab）中，始終存在的資料。也就是說只要這個瀏覽器視窗沒有關閉，即使重新整理頁面或進入同源另一頁面，資料仍然存在。關閉視窗後，sessionStorage即被銷燬。同時“獨立”開啟的不同視窗，即使是同一頁面，sessionStorage物件也是不同的。 Web Storage帶來的好處：減少網路流量：一旦資料儲存在本地後，就可以避免再向伺服器請求資料，因此減少不必要的資料請求，減少資料在瀏覽器和伺服器間不必要地來回傳遞。快速顯示資料：效能好，從本地讀資料比通過網路從伺服器獲得資料快得多，本地資料可以即時獲得。再加上網頁本身也可以有快取，因此整個頁面和資料都在本地的話，可以立即顯示。臨時儲存：很多時候資料只需要在使用者瀏覽一組頁面期間使用，關閉視窗後資料就可以丟棄了，這種情況使用sessionStorage非常方便。

事件storage

sessionStorage 和 localStorage具有相同的方法storage事件，在儲存事件的處理函式中是不能取消這個儲存動作的。儲存事件只是瀏覽器在資料變化發生之後給你的一個通知。當setItem(),removeItem()或者clear() 方法被呼叫，並且資料真的發生了改變時，storage事件就會被觸發。注意這裡的的條件是資料真的發生了變化。也就是說，如果當前的儲存區域是空的，你再去呼叫clear()是不會觸發事件的。或者你通過setItem()來設定一個與現有值相同的值，事件也是不會觸發的。當儲存區域發生改變時就會被觸發，這其中包含許多有用的屬性：

storageArea: 表示儲存型別（Session或Local） key:發生改變項的key oldValue: key的原值 newValue: key的新值 url*: key改變發生的URL * 注意: url 屬性早期的規範中為uri屬性。有些瀏覽器釋出較早，沒有包含這一變更。為相容性考慮，使用url屬性前，你應該先檢查它是否存在，如果沒有url屬性，則應該使用uri屬性 如果呼叫clear()方法，那麼key、oldValue和newValue都會被設定為null。

PS.在firefox和chrome中儲存和讀取都是正常的, 但是對storage事件的觸發似乎有點問題, 自身頁面進行setItem後沒有觸發window的storage事件, 但是同時訪問A.html和B.html, 在A頁面中進行 setItem能觸發B頁面中window的storage事件, 同樣的在B頁面中進行setItem能觸發A頁面中window的storage事件. 在IE9中, 頁面自身的設值能觸發當前頁面的storage事件,同樣當前頁面的設值能觸發同一”起源”下其他頁面window的storage事件,這看起來似乎更讓人想的通些.

參考：MDN

--------------------- 本文來自 KongyunWu 的CSDN 部落格 ，全文地址請點選：https://blog.csdn.net/wkyseo/article/details/51452303?utm_source=copy