localStorage使用实例-进入显示广告，点击关闭之后，刷新网页不再出现

最新推荐文章于 2021-10-11 15:44:57 发布

相约在一年四季

最新推荐文章于 2021-10-11 15:44:57 发布

阅读量1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： localstorage 显示广告关闭之后再刷新不出现

本文链接：https://blog.youkuaiyun.com/D321xiaoding/article/details/84565391

JS 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个仿京东官网顶部广告的实现方案，通过HTML、CSS和JavaScript结合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();