本地存儲localStroage的用法及示例

localStorage是HTML5在在客戶端存儲數據的新方法，存儲的數據沒有時間限制。

localStorage的主要API：

localStorage.setItem(key,value);   key是保存數據的變量，value是保存的數據

localStorage.getItem(key);           讀取之前存儲的數據

 

一個小例子，兩個按鈕和一段文字，點擊放大按鈕文字變大，點擊縮小按鈕文字變小，使用客戶端存儲 再次刷新頁面文字還是保持最後一次的文字大小。這樣就實現了根據用戶習慣來提升用戶體驗。

html結構：

<button id="changeLarge">放大</button>
<button id="changeSmall">縮小</button>
<p class="article" style="font-size:12px">有一段青春，埋葬的時間。總有一些人拼了命的，挽留最終還是留不住。總有一些話始終未能說出口，直至最後再也不必說出口。埋葬過去，我們有着太多的沉默。像是在時間的路剛好遇見，只是你裝做什麼也沒看見。很多年過去了，我始終在這裏執着。時間走過這裏並沒有，我想要的段落。也許下一段時光，會遇見一個更好的彼岸。流年劃過陌路，我們終於漸行漸遠。來不及說再見，也來不及爲那段。往事而傷心哭泣，一切要走都是上天。許早準備好的，只待我們路過此地。</p>

js實現代碼：

window.onload=function(){
		var changeLarge=document.getElementById('changeLarge');
		var changeSmall=document.getElementById('changeSmall');
		var article=document.getElementsByClassName('article')[0];

		var fontSize;
		if(localStorage.getItem("fontsize")!="undefined"){    //如果讀取到數據
			fontSize=parseInt(localStorage.getItem("fontsize"));   //把數據放到fontSize變量中
		}else{
			fontSize=12;
		}

		article.style.fontSize=fontSize+'px';  //設置當前article的文字大小
　　　　　　　　　　/*點擊放大按鈕文字變大*/
		changeLarge.onclick=function(){
			fontSize+=1;
			localStorage.setItem("fontsize",fontSize);  //存儲fontSize
			article.style.fontSize=fontSize+'px';
		}
　　　　　　　　　　/*點擊縮小按鈕文字縮小*/
		changeSmall.onclick=function(){
			fontSize-=1;
			localStorage.setItem("fontsize",fontSize);
			article.style.fontSize=fontSize+'px';
		}
	}