cookie，localStorage，sessionStorage的区别

用一张表格形象简单的说明一下：

	大小	生命周期	作用域	是否参与和服务器的通信	API	相同点
sessionStorage	5M	页面关闭死掉（会话级别）	不同页或标签之间无法共享	否	4个方法： setItem (key, value)  getItem (key) removeItem (key) clear()	都是保存在浏览器端,且是同源的。 存储的数据类型是字符串。
localStorage	5M	永久	不同页面间可以共享（页面属于相同域）	否	与sessionStorage的API一致，原生支持的很好
Cookie	4KB(有个数限制，一般不能超过20个)	看设置的过期时间	不同页面间可以共享	是	需要自己封装，原生的cookie接口不友好

WebStorage提供了一些方法：

• setItem (key, value) ——  保存数据，以键值对的方式储存信息。
• getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。
• removeItem (key) ——  删除单个数据，根据键值移除对应的信息。
• clear () ——  删除所有的数据

举个例子来了解一下他们的用法 

比如电商网站官网顶部的广告关闭，效果为第一次进入官网会出现广告，然后点击关闭，刷新网页不会再显示广告，但是当清除localStorage存入的数据，刷新网页会再显示广告，代码如下所示：

html代码：

<div class="box">
     <div class="boxSmall">
        <a href="javascript:;"></a>
        <span class="close">x</span>
     </div>
</div> 

css代码： 

.box{
     width:100%;
     height:80px;
     background:rgb(149, 245, 248);
 }
 .boxSmall{
      width:1190px;
      margin:0 auto;
      position:relative;
      background:url("img/close.jpg");
 }
 .boxSmall a{
     width:100%;
     height:80px;
     display:block;
 }
 .close{
     cursor:pointer;
     color:#fff;
     position:absolute;
     top:5px;
     right:5px;
     background:rgb(245, 106, 106);
     width: 20px;
     text-align: center;
     line-height: 20px;
}   

JS代码：  

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
    //localStorage方法
   
    function func(){
        //判断localStorage里有没有isClose
        if(localStorage.getItem("isClose")){             
            $(".box").hide();
        }else{
            $(".box").show();
        }
        //点击关闭隐藏图片存取数据
        $(".close").click(function(){
            $(".box").fadeOut(1000);

            localStorage.setItem("isClose", "1"); 
        })
    }
    func();
</script>

以上的代码执行完后在浏览器中打开点击关闭后再次刷新时也不会出现， 但是当清除localStorage存入的数据，刷新网页会再显示广告，代码如下所示：

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
    //localStorage方法
   
    function func(){
        //判断localStorage里有没有isClose
        if(localStorage.getItem("isClose")){             
            $(".box").hide();
        }else{
            $(".box").show();
        }
        //点击关闭隐藏图片存取数据
        $(".close").click(function(){
            $(".box").fadeOut(1000);

            localStorage.setItem("isClose", "1"); 
        })

        localStorage.clear();   //加入此句清除localStorage存入的数据
    }
    func();
</script>