一天只显示一次的弹出广告

仿京东官网顶部的广告关闭,效果为第一次进入官网会出现广告,然后点击关闭,刷新网页不会再显示广告,但是当清除localStorage存入的数据,刷新网页会再显示广告。

html代码

<div class="header">
    <div class="header-a">
        <a href="">a>
        <i class="close">xi>
    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 popAd(){
        //判断localStorage里有没有isClose
        if(localStorage.getItem("isClose")){             
            $(".header").hide();
        }else{
            $(".header").show();
        }
        //点击关闭隐藏图片存取数据
        $(".close").click(function(){
            $(".header").fadeOut(1000);

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

chrome console清本地缓存localStorage.clear()

批量清:
localStorage.clear()

单独清除某个记录的缓存,如:
localStorage.clear("popup_info")  或 localStorage.removeItem("popup_info"); 

你可能感兴趣的:(HTML,js,CSS)