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';
		}
	}

 

内容来源于网络如有侵权请私信删除
你还没有登录,请先登录注册
  • 还没有人评论,欢迎说说您的想法!