首页 > 建站教程 > html教程 >  html5 localStorage,html5本地存储正文

html5 localStorage,html5本地存储

HTML5带给我们的不仅仅是更多语义丰富的标签，还有更多新特性，比如本地存储。要在客户端保存用户一些数据，我们首选使用cookie，但是 cookie最多只能存储4kb，而HTML5的本地存储localStorage可以存储5M的数据，这将对WEB开发以及移动终端应用带来革命性的转变。

目前主流浏览器都支持localStorage本地存储，而微软从IE8就出人意料的开始支持localStorage。本文将和您一起分享HTML5本地存储localStorage相关知识，通过实例熟悉本地存储的在WEB开发中的应用。
如何使用localStorage？

localStorage的使用非常简单，提供了设置、获取和删除等方法。如： 
//设置存储客户端的键值bar的值为123 
localStorage.setItem("bar", "123"); 
//获取客户端存储的键值bar的值 
var foo = localStorage.getItem("bar"); 
//删除键值 
localStorage.removeItem("bar");
示例1.计数器

我们先来看一个实例，用localStorage来做一个计数器，计算用户访问页面的次数。 
var count = localStorage.getItem("pagecount"); 
if(count){ 
    count = Number(localStorage.pagecount) +1; 
}else{ 
    count = 1; 
} 
document.write("view times:"+count);
运行以上代码后，你会发现只要每次刷新页面，访问次数会加1，如果你关掉页面下次打开，还能看到访问次数在增加并且一直保存在你电脑里，直到有一天你使用removeItem()清空存储的数据。

示例2.记录页面状态

在页面中，我们有一个TAB标签，点击后可以切换不同的TAB对应的内容，我们现在要做的是本地保存用户点击的是哪个TAB，以及对应的展示内容，当用户刷新页面或者关闭后N长时间再打开该页面时，TAB的对应状态保留上次关闭页面时的状态。

HTML
我们在页面上建立5个TAB，并对应5个list。 
<div id="nav"> 
     <ul> 
        <li><a href="#">HTML/CSS</a></li> 
        <li><a href="#">Javascript/Ajax/jQuery</a></li> 
        <li><a href="#">PHP+MYSQL</a></li> 
        <li><a href="#">前端观察</a></li> 
        <li><a href="#">HTML5/移动WEB应用</a></li> 
    </ul> 
</div> 
<div id="page"> 
    <div class="list">1</div> 
    <div class="list">2</div> 
    <div class="list">3</div> 
    <div class="list">4</div> 
    <div class="list">5</div> 
</div>
CSS
接着我们用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}
如果你的浏览器支持CSS3的话，你将看到圆角和阴影效果。
最后我们来实现本地存储的功能。我们的功能基于jquery库，所以记得在html中先载入jquery库文件，当然你也可以使用原生的javascript代码来实现。 
var show = 0; //定义默认展示的是第一个TAB选中状态 
if (window.localStorage){ //如果浏览器支持localStorage 
    var navShow = localStorage.getItem("shownum"); //获取客户端TAB状态 
    if(navShow==null){ //如果为空，即第一次打开 
        //将默认的第一个TAB设置为选中状态并显示与其对应的list 
        $("#nav ul li").eq(show).addClass("cur").siblings().removeClass("cur"); 
        $(".list").eq(show).show().siblings().hide(); 
    } 
    $("#nav ul li").each(function(index){ //遍历每个TAB 
        var li = $(this); 
        show = li.attr("cur")==true?index:show; //如果当前TAB被点击选中，则将show值设为当前的索引值 
        if(index==navShow){ //如果当前索引值与存储的TAB状态值一致 
            li.addClass("cur"); //设置为选中状态样式 
            $(".list").eq(index).show().siblings().hide(); //显示对应的list 
        } 
        li.click(function(){ //当单击当前TAB时 
            li.addClass("cur").siblings().removeClass("cur");//设置为选中状态样式 
            $(".list").eq(index).show().siblings().hide(); //显示对应的list 
            localStorage.setItem("shownum",index); //将TAB选中状态存储到本地 
        }); 
    }); 
}else{//如果浏览器不支持localStorage 
    alert('您的浏览器不支持localStorage.'); 
}
我们首先获取本地数据，得到对应的选中状态的TAB，如果未能获取到，则调用默认值，即选中第一个TAB。遍历TAB时，如果发现某个TAB是选中状态，则设置选中样式cur，即完成了TAB初始化的过程。接下来用户操作，当点击任意TAB时，设置对应的样式，并保存状态到本地，下次刷新就可以看到上次保存的状态。

本文转载自：http://www.helloweba.com，版权归原作者所有。
TAGS: html5 localStorage  html5本地存储  localStorag