Storage實例對象
sessionStorage:為每一個給定的域維持一個獨立的存儲空間，該存儲空間在頁面會話期間可用，即只要瀏覽器處于打開狀態(tài)，包括頁面重新加載和回復(fù)
localStorage:在瀏覽器關(guān)閉后，重新打開數(shù)據(jù)仍然存在。（其他跟sessionStorage相同）
StorageEvent：
當(dāng)Storage發(fā)生變化時，和它同域的、在其他Tab中打開的頁面會收到StorageEvent事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Storage Event</title>
</head>
<body>
<input id="setNewDate" type="button" value="Set New Date" />
<div id="now"></div>
<script>
//監(jiān)聽Storage事件
window.addEventListener('storage', function (evt){
console.log(evt.key, evt.newValue, evt.oldValue, evt.storageArea, evt.url); },false);
function setNewDate() {
var newDate = new Date().toString();
localStorage.setItem('now',newDate);
document.getElementById('now').innerHTML = newDate;
}
//監(jiān)聽按鈕點擊事件
document.getElementById('setNewDate').addEventListener('click', setNewDate);
</script>
</body>
</html>
Storage 使用時注意點：
1.Storage:兼容性檢測方法：
if (typeof localStorage !== 'undefined') {
// do something
} else {
console.log('您的瀏覽器不支持 localStorage');
}
if (typeof sessionStorage !== 'undefined') {
//do something
} else {
console.log('您的瀏覽器不支持 sessionStorage');
}
2.Storage:同步特性
Storage的所有方法都試同步的，意味著它們會阻塞主頁面的渲染以及其他操作。
3.Storage:容量有限制
由于localStorge中的數(shù)據(jù)是要保存到用戶電腦的磁盤上的，如果不受限，則攻擊者可以寫惡意代碼將用戶磁盤塞滿。
Storage最初設(shè)計目的：
為了解決在不同窗口中同事操作多種事務(wù)的問題，Cookile不能很好的解決這個問題。
Storage使用場景（不保存敏感數(shù)據(jù)）：
localStorage：可以把一些非必須的、但又能提升用戶體驗的功能數(shù)據(jù)保存在localStorage中，最常見的是用戶自定義設(shè)置的信息
sessionStorage：適合保存某次使用過程中，只會用到一次的功能數(shù)據(jù)。
