瀏覽器快取機制(四)——sessionStorage和localStorage
一.Web Storage
Web Storage是HTML5提出的本地儲存機制，主要目的是克服cookie的一些限制，當資料需要被嚴格控制在客戶端上時，無需持續的將資料發回伺服器。
優點：
- 大量資料的儲存（也有限制，因瀏覽器而異，每個來源2.5M/5M）
- 資料不是由每個伺服器請求傳遞的，而是隻有在請求時使用資料。它使在不影響網站效能的情況下儲存大量資料成為可能。
- 跨會話
缺陷:
- 因為WebStorage API屬於一種同步API,所以在儲存大資料量或儲存物件時的效能不高。
- 因為缺乏索引,所以在針對大資料量或物件進行搜尋時的效能不高。
- 因為目前主流瀏覽器均只支援在WebStorage中儲存字串資料,所以當儲存物件時必須先將其轉換為JSON字串後進行儲存,當獲取物件時必須先將取出的字串後將其還原為物件,所以導致針對物件進行存取操作時的效能不高。
分類：
Web Storage提供了兩種在客戶端儲存資料的方法：
- localStorage - 沒有時間限制的資料儲存
- sessionStorage - 針對一個 session 的資料儲存
瀏覽器相容性：
localStorage， sessionStorage都是瀏覽器的物件，絕大部分現代瀏覽器中已經得到了很好的支援，但是既然是絕大部分，就必須照顧那些還不支援這兩個物件的瀏覽器。為了檢測瀏覽器是否支援這兩個物件，我們可以簡單的用下面的程式碼來檢測：
function storageSupport() {
try {
return 使用方式：
注：localStorage， sessionStorage都是Storage型別的例項，Storage型別只能儲存字串，非字串的資料在儲存前會被轉化成字串。
二.sessionStorage
sessionStorage 是個全域性物件，它維護著在頁面會話(page session)期間有效的儲存空間。只要瀏覽器開著，頁面會話週期就會一直持續。
當頁面重新載入(reload)或者被恢復(restores)時，頁面會話也是一直存在。
每在新標籤或者新視窗中開啟一個新頁面，都會初始化一個新的會話。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
window.onload=function () {
sessionStorage.setItem("myname","zhoujie");
alert(sessionStorage.getItem("myname"))
}
</script>
</body>
</html>當我在瀏覽器開啟時，會彈出”zhoujie”，資料會在本地進行儲存，
有圖有真相：
接下來我將sessionStorage.setItem(“myname”,”zhoujie”);註釋掉，再重新整理頁面，還是會彈出正確的myname。
但在我註釋掉設定語句後，再開啟一個新視窗，或者重新關掉瀏覽器重新開啟時，資料就會被清除。
二.localStorage
localStorage是跨多個視窗，且持續範圍可超過當前會話；意味著當瀏覽器關閉再重新開啟，資料依然是可用的。資料保留到通過js刪除或使用者清除瀏覽器快取。
上程式碼：
<body>
<script>
window.onload=function () {
localStorage.setItem("myname","zhoujie");
alert(localStorage.getItem("myname"))
}
</script>
</body>這時我開啟瀏覽器，會彈出”zhoujie”。看看本地的儲存情況：
接著我註釋掉設定程式碼，關掉瀏覽器重新開啟，還是會彈出“zhoujie”，並且資料依然在。
