1. 程式人生 > >localStorage使用例項-進入顯示廣告,點選關閉之後,重新整理網頁不再出現

localStorage使用例項-進入顯示廣告,點選關閉之後,重新整理網頁不再出現

仿一下京東官網頂部的廣告關閉,效果為第一次進入官網會出現廣告,然後點選關閉,重新整理網頁不會再顯示廣告,但是當清除localStorage存入的資料,重新整理網頁會再顯示廣告。
html程式碼


<div class="header">
    <div class="header-a">
        <a href=""></a>
        <i class="close">x</i>
    </div>
</div>   

css程式碼

.header{
    width:100%;
    height:80px;
    background:#000;
}
.header-a{
    width:1190px;
    margin:0 auto;
    position:relative;
    background:url("images/1.jpg") no-repeat;
}
.header-a a{
    width:100%;
    height:80px;
    display:block;
}
.close{
    cursor:pointer;
    color:#fff;
    position:absolute;
    top:5px;
    right:5px;
    background:rgb(129, 117, 117);
    width: 20px;
    text-align: center;
    line-height: 20px;
}    

js程式碼

//localStorage方法

<script src="../js/jquery.min.js"></script>
function haxi(){
        //判斷localStorage裡有沒有isClose
        if(localStorage.getItem("isClose")){             
            $(".header").hide();
        }else{
            $(".header").show();
        }
        //點選關閉隱藏圖片存取資料
        $(".close").click(function(){
            $(".header").fadeOut(1000);

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