使用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<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數據進行更新，或者同步其他標簽頁的數據。

看完了這篇文章，相信你對使用Web Storage存儲的方法有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！