localStorage-------sessionStorage
Web Storage特點:
1、Key--Value型的簡單存儲形式
2、可以和其他普通的javascript對象相同的形式來進行讀寫操作
3、容量大-->5M(和cookie相比)--(cookie只有4KB、且發送請求時會一起帶上,影響速度)
4、只能在同源的情況下才能被訪問
以下用localStorage進行舉例----》sessionStorage和localStorage基本相同,但是sessionStorage是基於會話的,隨着窗口的關閉而消失。但是localStorage是存儲在本地的數據,除了通過程序刪除或者手動刪除,數據是不會丟失的。
類似與普通的javascript對象,可以採用點(.)操作和[ ]中括號操作來訪問屬性。
如:localStorage.setItem(" foo","1") \ localStorage.foo="1" \ localStorage["foo"]="1"
常用的api:setItem()、getItem()、clear()。
在對象進行存儲的時候,在讀寫的時候,需要將對象轉成JSON字符串進行存儲,引入2個函數JSON.stringify(obj)、JSON.parse(str)
如:var obj={x:1,y:2} 存儲:localStorage.obj=JSON.stringify(obj)、讀取:var obj2=localStorage.parse(localStorage.obj)。
數據的枚舉:1、通過key方法和length屬性遍歷 2、for in 遍歷
1:for (var i=0;i<localStorage.length;i++){var key=localStorage.key(i) , value=localStorage[key] ; console.log(key+":"+value);}
2:for (var key in localStorage){ if(localStorage.hasOwnProperty(key)){var value=localStorage[key] ; console.log(key+":"+value);} }
storage事件
在某個窗口更改了web Storage的數據之後,那麼就在除了更改數據的窗口之外的所以窗口觸發storage事件。
window.addEventListener('storage',function(event){ console.log(event.key) }.false);
下面列舉幾個常用的event事件對象的屬性。
key(被更新的鍵名)、oldValue(更新前的值)、newValue(更新之後的值)、url(被更新的頁面的url)
命名空間的管理----由於localStorage的數據不對自動消失,如果胡亂的添加過多的屬性,就會導致後續的管理變得十分困難。我們可以通過命名空間來進行管理。
<span style="white-space:pre"> </span>var serviceName="SERVICENAME",storage=null;
//通過load事件讀取數據至本地變量
window.onload=function(){
try{
storage=JSON.parse(localStorage[serviceName] || '{}');
}catch{
storage={};
}
}
//通過onbeforeunload時間將數據寫入localStorage
window.onbeforeunload=function(){
localStorage[serviceName]=JSON.stringify(storage)
}
1、將localStorage的數據寫到本地變量storage中,那麼對其的訪問速度會比訪問localStroage的速度塊。
2、不同頁面或者不同模塊分別以不同的serviceName命名,進而避免屬性名衝突
3、由於一次頁面只對localStorage讀寫了一次,所以在頁面中無法觸發storage事件。所以在必要時,我們必要時需要封裝方法來對localStorage數據進行更新,或者同步其他標籤頁的數據。