HTML5帶給我們的不僅僅是更多(duō)語義豐富的标簽，還(hái)有(yǒu)更多(duō)新特性，比如本地存儲。要在客戶端保存用戶一些(xiē)數(shù)據，我們首選使用cookie，但(dàn)是cookie最多(duō)隻能存儲4kb，而HTML5的本地存儲localStorage可(kě)以存儲5M的數(shù)據，這将對WEB開(kāi)發以及移動終端應用帶來(lái)革命性的轉變。

目前主流浏覽器(qì)都支持localStorage本地存儲，而微軟從IE8就出人(rén)意料的開(kāi)始支持localStorage。本文将和(hé)您一起分享HTML5本地存儲localStorage相關知識，通(tōng)過實例熟悉本地存儲的在WEB開(kāi)發中的應用。

如何使用localStorage？

localStorage的使用非常簡單，提供了設置、獲取和(hé)删除等方法。如：

//設置存儲客戶端的鍵值bar的值為(wèi)123
localStorage.setItem("bar", "123");
//獲取客戶端存儲的鍵值bar的值
var foo = localStorage.getItem("bar");
//删除鍵值
localStorage.removeItem("bar");

示例1.計(jì)數(shù)器(qì)

我們先來(lái)看一個(gè)實例，用localStorage來(lái)做(zuò)一個(gè)計(jì)數(shù)器(qì)，計(jì)算(suàn)用戶訪問頁面的次數(shù)。

var count = localStorage.getItem("pagecount");
if(count){
	count = Number(localStorage.pagecount) +1;
}else{
	count = 1;
}
document.write("view times:"+count);

運行(xíng)以上(shàng)代碼後，你(nǐ)會(huì)發現隻要每次刷新頁面，訪問次數(shù)會(huì)加1，如果你(nǐ)關掉頁面下次打開(kāi)，還(hái)能看到訪問次數(shù)在增加并且一直保存在你(nǐ)電(diàn)腦(nǎo)裏，直到有(yǒu)一天你(nǐ)使用removeItem()清空(kōng)存儲的數(shù)據。

示例2.記錄頁面狀态

在頁面中，我們有(yǒu)一個(gè)TAB标簽，點擊後可(kě)以切換不同的TAB對應的內(nèi)容，我們現在要做(zuò)的是本地保存用戶點擊的是哪個(gè)TAB，以及對應的展示內(nèi)容，當用戶刷新頁面或者關閉後N長時(shí)間(jiān)再打開(kāi)該頁面時(shí)，TAB的對應狀态保留上(shàng)次關閉頁面時(shí)的狀态。

HTML

我們在頁面上(shàng)建立5個(gè)TAB，并對應5個(gè)list。

接着我們用CSS來(lái)規範下頁面。

CSS

#nav{height:42px; border:1px solid #d3d3d3; background:#f7f7f7;-moz-border-radius:2px; 
-webkit-border-radius:2px; border-radius:2px; -moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); 
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);}
#nav li{float:left; height:42px; line-height:42px; padding:0 10px; 
border-right:1px solid #d3d3d3; font-size:14px; font-weight:bold}
#nav li.cur{background:#f1f1f1; border-top:1px solid #f60; box-shadow:none}
#nav li a{text-decoration:none; display:block}
#nav li.cur a{color:#333}
#nav li a:hover{color:#f30}

#page{margin:20px auto}
.list{display:none}

如果你(nǐ)的浏覽器(qì)支持CSS3的話(huà)，你(nǐ)将看到圓角和(hé)陰影(yǐng)效果。

最後我們來(lái)實現本地存儲的功能。我們的功能基于jquery庫，所以記得(de)在html中先載入jquery庫文件，當然你(nǐ)也可(kě)以使用原生(shēng)的javascript代碼來(lái)實現。

var show = 0; //定義默認展示的是第一個(gè)TAB選中狀态
if (window.localStorage){ //如果浏覽器(qì)支持localStorage
	var navShow = localStorage.getItem("shownum"); //獲取客戶端TAB狀态
	if(navShow==null){ //如果為(wèi)空(kōng)，即第一次打開(kāi)
		//将默認的第一個(gè)TAB設置為(wèi)選中狀态并顯示與其對應的list
		$("#nav ul li").eq(show).addClass("cur").siblings().removeClass("cur");
		$(".list").eq(show).show().siblings().hide();
	}
	$("#nav ul li").each(function(index){ //遍曆每個(gè)TAB
		var li = $(this);
		show = li.attr("cur")==true?index:show; //如果當前TAB被點擊選中，則将show值設為(wèi)當前的索引值
		if(index==navShow){ //如果當前索引值與存儲的TAB狀态值一緻
			li.addClass("cur"); //設置為(wèi)選中狀态樣式
			$(".list").eq(index).show().siblings().hide(); //顯示對應的list
		}
		li.click(function(){ //當單擊當前TAB時(shí)
			li.addClass("cur").siblings().removeClass("cur");//設置為(wèi)選中狀态樣式
			$(".list").eq(index).show().siblings().hide(); //顯示對應的list
			localStorage.setItem("shownum",index); //将TAB選中狀态存儲到本地
		});
	});
}else{//如果浏覽器(qì)不支持localStorage
	alert('您的浏覽器(qì)不支持localStorage.');
}

我們首先獲取本地數(shù)據，得(de)到對應的選中狀态的TAB，如果未能獲取到，則調用默認值，即選中第一個(gè)TAB。遍曆TAB時(shí)，如果發現某個(gè)TAB是選中狀态，則設置選中樣式cur，即完成了TAB初始化的過程。接下來(lái)用戶操作(zuò)，當點擊任意TAB時(shí)，設置對應的樣式，并保存狀态到本地，下次刷新就可(kě)以看到上(shàng)次保存的狀态。