localStorage使用例項-進入顯示廣告,點選關閉之後,重新整理網頁不再出現
阿新 • • 發佈:2018-11-28
仿一下京東官網頂部的廣告關閉,效果為第一次進入官網會出現廣告,然後點選關閉,重新整理網頁不會再顯示廣告,但是當清除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();