版權聲明：本文爲吳孔雲博客原創文章，轉載請註明出處並帶上鍊接 https://blog.csdn.net/wkyseo/article/details/51452303
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web請求之間保存數據。有了本地數據，就可以避免數據在瀏覽器和服務器間不必要地來回傳遞。
https://aximario.github.io/2016/12/15/web-storage/
https://blog.csdn.net/wkyseo/article/details/51452303?utm_source=copy
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
瀏覽器接收到表明迴應成功的 HTTP 200 代碼，以及迴應的內容類型。同時也接收到了 Set-Cookie頭部，並創建了一個的cookie：
| Name | Value | Expires |
|---|---|---|
| page_loaded | 25 | Wed, 09 Jun 2021 10:18:14 GMT |
除非在Wed, 09 Jun 2021 10:18:14前刷新，否則cookie將在這以後無效並被瀏覽器移除。如果它沒有被終止，在將來所有的該網站的請求中都將攜帶類似的信息頭部：
GET /spec.html HTTP/1.1
Host: www.example.org
Cookie: page_loaded=25;
cookie一直在潛在隱私和安全影響方面有一個壞名聲。他們很容易受到安全問題攻擊影響，例如關鍵攻擊載體的CSRF（Cross Site Request Forgery）,XSS(Cross Site Scripting Attacks) 以及 Session Hijacking 。一個用功且專業的開發者也許不會把很多安全細節信息放在cookie中，或者實現一系列的方法來減輕可能的這些形式的攻擊。
WebStorage
HTML5引入了Web Storage作爲Cookies的替代，這種存儲有兩種類型：local 和 session：
原文鏈接：http://caibaojian.com/web-storage.html
localStorage
localStorage是用來做永久性存儲的。·
localStorage裏的數據的時效是永久的！只要你不刪，它就一直在那。除非web應用需要刪除或者用戶需要刪掉它。
localStorage的作用域是限定在文檔源級別的，
不同的文檔源之間是不能讀取和修改對方的數據的，而相同的文檔源是可以的。但是不同的瀏覽器是不共享Storage的，也就是說你在Chorme瀏覽器裏存的數據，在Firefox裏是訪問不到的，即使它們是同一文檔源。
sessionStorage
sessionStorage是用來做臨時性存儲的。
sessionStorage的時效只存在於標籤頁存在的時間，一旦標籤被關閉了，sessionStorage存儲的數據也會被刪除掉。
sessionStorage的作用域同樣是限定在文檔源級別的，不僅如此，它還被限制在標籤頁中，不同標籤頁的同一個頁面擁有各自的sessionStorage，數據不能共享。如果是一個頁面裏有兩個<iframe>元素，它們是共享sessionStorage的。
Web Storage API
好，簡要的講完了Web Storage的特性之後呢，接下來該講講怎麼操作Web Storage了。
Storage對象提供了操作key/value對（下面我們稱之爲item）的方法，key和value都是string類型的值（包括空字符串），如果存的不是字符串，會在存儲前被轉換成字符串，要小心哦！
length
length返回Storage對象內item的數量，這是一個只讀屬性。
下面的代碼可以在Chorme控制檯裏給localStorage增加一個判斷是否爲空的方法
|
1 2 3 |
localStorage.__proto__.isEmpty = function isEmpty() { return localStorage.length === 0; } |
key(index)
key(index)返回第n項的key。當index的值超出了length，返回null。
注意：存入Storage對象內的item的排序順序由瀏覽器廠商自己決定，不一定是按照你存入的順序排序的哦,當你增加或者刪除item時，index對應的值可能會變化
下面的代碼可以遍歷localStorage裏的所有key
|
1 2 3 |
for (let i = 0, len = localStorage.length; i < len; i++) { console.log(localStorage.key(i)); } |
getItem(key)
返回對應key值的value，如果沒有，返回null。
|
1 |
localStorage.getItem('gameRemainingTime'); |
setItem(key, value)
setItem方法首先檢查要設置的item是否存在，如果不存在，在Storage里加入該item；如果存在，更新這個item的value。如果無法存入新item，該方法會拋出QuotaExceedeErrorDOMException異常，不改變Storage內的任何內容（表示Storage已經存滿了，Storage目前推薦的存儲容量上限爲5M）
|
1 |
localStorage.setItem('gameRemainingTime', '10'); |
removeItem(key)
removeItem方法會刪除指定的item，如果不存在指定的item，什麼都不做
|
1 |
localStorage.removeItem('gameRemainingTime'); |
clear()
clear方法會清空Storage裏的所有item，如果Storage本來就是空的，什麼都不做
|
1 |
localStorage.clear(); |
Web Storage 存儲事件
當localStorage或者sessionStorage的數據發生變化的時候，瀏覽器都會在其他對該數據可見的窗口對象上觸發storage事件（本窗口除外）。
重要：只有當存儲數據真正發生變化時纔會觸發存儲事件，比如給一個item重新設置一個和原來一樣的value，或者是刪除一個不存在的item是不會觸發存儲事件的。
StorageEvent的幾個屬性：
- key：item的key，沒有則爲null
- newValue: item的新值，沒有則爲null
- oldValue: item的舊值，沒有則爲null
- storageArea: sessionStorage或者localStorage
- url: 觸發存儲事件的腳本所在文檔的url
|
1 2 3 |
window.addEventListener('storage', function(e) { console.log(e.key, e.oldValue, e.newValue, e.storageArea, e.url); }, false); |
Web Storage 進階
這一章主要講一些不那麼重要，零碎的小知識點，可看可不看，有發現一些新東西會慢慢補充進來。
sessionStorage
對於存在sessionStorage裏的數據，瀏覽器是不應該給它設置過期時間的，它有自己的生命週期。除非用戶要求刪掉數據，或者存儲空間不足，或者處於完全原因。
現在有些瀏覽器有打開上次關閉的標籤頁的功能，所以sessionStorage的生命週期可能並不是在標籤頁關閉之後就立馬結束，可能會延時一段時間。
localStorage
如果用戶禁用了緩存，那麼在我們存入數據時會拋出SecurityError DOMException
磁盤空間
目前推薦的磁盤空間是5M，但是不同的瀏覽器廠商有不同的設定，這個設定會由實際檢驗合理性，比較合理的大小可以反饋給W3C，然後他們來修改這個推薦的大小。
當存儲空間即將達到上限的時候，瀏覽器可以提醒用戶授權增加一點存儲空間，剩餘的存儲空間瀏覽器也應該能讓用戶知道。
IE對數據的存儲是異步的，Firefox和WebKit是同步的。在數據量少的時候是看不出區別的。除非存儲的數據量達到一定的量級，你會發現IE執行的會比較快，因爲它跳過了寫到磁盤的過程。
參考文獻
- HTML Standard - Web Storage
- 《JavaScript 權威指南》
- 《JavaScript 高級程序設計》
- 《HTML5 權威指南》
原文來自：https://aximario.github.io/2016/12/15/web-storage/
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