怎樣使用Web Storage存儲

這次帶給大家怎樣使用Web Storage存儲，使用Web Storage存儲的注意事項有哪些，下面就是實戰案例，一起來看一下。

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

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的資料不對自動消失，如果胡亂的添加過多的屬性，就會導致後續的管理變得十分困難。我們可以透過命名空間來進行管理。

	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資料進行更新，或是同步其他標籤頁的資料。 
我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ 
推薦閱讀：

如何使用來源生css3實作圓環載入進度條

#如何存取JS的物件屬性與方法
以上是怎樣使用Web Storage存儲的詳細內容。更多資訊請關注PHP中文網其他相關文章！