HTML5技术

本地存储localStroage的用法及示例 - heyujun-

字号+ 作者:H5之家 来源:H5之家 2017-05-09 12:00 我要评论( )

localStorage是HTML5在在客户端存储数据的新方法,存储的数据没有时间限制。 localStorage的主要API: localStorage.setItem(key,value); key是保存数据的变量,value是保存的数据 localStorage.getItem(key); 读取之前存储的数据 一个小例子,两个按钮和一

localStorage是HTML5在在客户端存储数据的新方法,存储的数据没有时间限制。

localStorage的主要API:

localStorage.setItem(key,value);   key是保存数据的变量,value是保存的数据

localStorage.getItem(key);           读取之前存储的数据

 

一个小例子,两个按钮和一段文字,点击放大按钮文字变大,点击缩小按钮文字变小,使用客户端存储 再次刷新页面文字还是保持最后一次的文字大小。这样就实现了根据用户习惯来提升用户体验。

html结构:

<button>放大</button> <button>缩小</button> <p>有一段青春,埋葬的时间。总有一些人拼了命的,挽留最终还是留不住。总有一些话始终未能说出口,直至最后再也不必说出口。埋葬过去,我们有着太多的沉默。像是在时间的路刚好遇见,只是你装做什么也没看见。很多年过去了,我始终在这里执着。时间走过这里并没有,我想要的段落。也许下一段时光,会遇见一个更好的彼岸。流年划过陌路,我们终于渐行渐远。来不及说再见,也来不及为那段。往事而伤心哭泣,一切要走都是上天。许早准备好的,只待我们路过此地。</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'; } }

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5的web存储详解 - Cythia-milk

    html5的web存储详解 - Cythia-milk

    2017-05-04 16:00

  • 前端实现搜索记录功能也就是天猫app历史记录存储方便浏览 - 今天的代码你撸了嘛

    前端实现搜索记录功能也就是天猫app历史记录存储方便浏览 - 今天的代

    2017-04-12 14:00

  • 浓缩的才是精华:浅析GIF格式图片的存储和压缩 - 腾讯云技术社区

    浓缩的才是精华:浅析GIF格式图片的存储和压缩 - 腾讯云技术社区

    2017-04-07 15:08

  • HTML5本地图片裁剪并上传 - QxQstar

    HTML5本地图片裁剪并上传 - QxQstar

    2017-03-25 14:00

网友点评
f