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

如何关闭页面之前清空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();
CSS+JS+Cookie实现关闭广告后刷新浏览器不显示,关闭重启浏览器显示 CSS+JS+Cookie实现关闭广告后刷新浏览器不显示,关闭重启浏览器显示,本地测试请用Mozilla Firefox 火狐浏览器,因为只有火狐浏览器本地才支持Cookie 立即下载

相关推荐

CSS+JS+Cookie实现页脚固定广告展示(支持关闭、一段时间内不显示)

经常看到有些网站为了吸引用户注意,在页面底部放置固定横幅广告,用户滚动页面时,横幅广告一直固定在页底,并不随页面滚动而滚动,当然一般允许用户可以关闭广告条,并设置一定时间内不再显示此广告条。本文将介绍使用CSS+Cookie来实现这一效果。 源码下载:点此下载 HTML 首先,我们将横幅广告的html代码放到页面最底部,因为是最后加载的。也可以使用外部js动态插入到页面底部。整个HTML结构由遮罩层.float_layer,内容层.float_content组成,其中.float_bg为广告部分,内容可以是图片、文字等任意形式的html元素,.float_close是关闭按钮,用户不喜欢广告可

vue中关闭浏览器清除localStorage,并且刷新时保持状态不受影响

在App.vue中 mounted() { window.onload = function () { console.log(window.sessionStorage["ISlogin"]); if (!window.sessionStorage["ISlogin"]) { // 关闭浏览器 window.localStorage.removeItem("userInfo"); } else { // 刷新

weixin_46413834的博客 3045

ARKit面部动画实战:如何用blend shape让数字人表情更自然(附中文对照表)

本文深入探讨了如何利用ARKit的blend shape技术驱动数字人面部动画,以实现更自然生动的表情。文章提供了详细的blend shape中文对照表,并分享了实战技巧,包括构建复合表情动画序列、处理不对称性与微表情,以及性能优化策略,旨在帮助开发者高效提升数字人的表情表现力。

weixin_29292535的博客 327

表单中输入框中输入的内容自动存入localStorage中,并在刷新页面后显示出来。

表单中输入框中输入的内容自动存入localStorage中,并在刷新页面后显示出来。

m0_71814235的博客 731

电源设计避坑指南:半桥LLC软启动的5个常见错误及解决方案

本文针对半桥LLC谐振变换器软启动过程中的五个常见设计错误,提供了详细的工程解决方案。重点分析了忽视谐振腔初始状态导致的电流冲击、软启动斜坡与环路带宽不匹配、开环到闭环切换时机不当、变压器偏磁以及参数未考虑边界条件等问题,并给出了包括主动预充电、自适应斜坡、最佳切换点判定等实用调试技巧,帮助工程师实现平稳可靠的电源启动。

weixin_29260291的博客 283

Windows Server 2012 R2虚拟机安装全攻略:从镜像选择到网络配置一步到位

本文提供Windows Server 2012 R2虚拟机安装全攻略,涵盖从镜像选择到网络配置的完整流程。详细讲解在Oracle VM VirtualBox中的安装步骤、TCP/IP网络设置、系统优化及常见问题解决方案,帮助用户快速搭建可立即投入使用的服务器环境。特别适合IT初学者和系统管理员学习传统服务器应用的部署与配置。

weixin_28363123的博客 541

js处理cookie,第一次打开有弹窗 ,关闭后刷新无效,直到关闭浏览器

jquery设置浏览器缓存cookie提示内容显示隐藏 $(function(){ $('.WebDown .Close').click(function(){ $('.WebDown').fadeOut(300); if($("#NotShow").attr("checked")){ setCookie("B

kongjiea笔记 8419

永磁同步电机高效标定技术:从理论到实践的全面解析

本文全面解析永磁同步电机高效标定技术,从MTPA标定、弱磁区优化到初始角校准,详细介绍了理论原理和实战技巧。针对新能源汽车应用场景,提供标定系统集成要点和AI辅助优化方案,帮助工程师提升电机性能标定效率与精度。

weixin_28452161的博客 505

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

仿京东官网顶部的广告关闭,效果为第一次进入官网会出现广告,然后点击关闭,刷新网页不会再显示广告,但是当清除localStorage存入的数据,刷新网页会再显示广告。 html代码 <div class="header"> <div class="header-a"> <a href=""></a> <i ...

qq_40091850的博客 1969

告别有线:用PVE直通无线网卡,打造一台真正的‘无线’Win10软路由/测试机

本文详细介绍了如何通过PVE直通无线网卡技术,构建全无线Win10软路由或测试机。从硬件选型、PVE环境配置到PCIe和USB双模直通技术,逐步指导实现Wi-Fi AP和蓝牙连接功能,为家庭实验室和小型办公环境提供灵活高效的网络解决方案。

weixin_28683689的博客 588

日语五十音图速记攻略:从形象联想法到实战训练

语言学习中的记忆编码与条件反射构建是高效掌握基础的关键。其核心原理在于通过将抽象符号与具象图像、故事或已知概念关联,利用大脑对视觉和叙事信息的天然高记忆效率,从而降低认知负荷,加速识别与反应速度。这一方法的技术价值在于将机械重复转化为意义联结,显著提升长期记忆的牢固度与提取速度。在日语学习这一具体应用场景中,五十音图作为表音文字系统,正是实践这一记忆技术的绝佳对象。通过系统化的形象联想、分组对比(如平假名与片假名的对应关系)以及间隔重复的实战训练,学习者可以高效攻克这一入门难关,为后续的词汇、语法学习铺设坚

weixin_29032489的博客 378

使用油猴脚本实现一键开启或关闭自动刷新网页

一般情况下,我们不会有这个自动刷新浏览器网页的需求,但以前实习的时候,也确实遇到过这种需求。正好这几天写的博客都跟油猴脚本多少有点关系,就想试着写写看。如果是让网页一直不停的刷新,那么实现起来太简单了,但使用体验肯定不会好。能设置刷新时间,并提供一个可以生成随机刷新时间的方法。能有一个提示信息,也就是一个简单的提示弹窗,提示当前的状态【是否开启了自动刷新功能?多少秒后开始刷新网页?】,一段时间后自动消失。能匹配到所有网页地址,也就是在所有网页上都生效。

qq_43535992的博客 3343

RTAB-map:实时高效的SLAM库

Real‐time appearance‐based mapping (RTAB‐Map)是一种基于外观的闭环检测方法,具有良好的内存管理,以满足处理大场景和在线长周期管理要求。RTAB‐Map集成了视觉和激光雷达SLAM方案,并支持目前绝大多数的传感器 是一个强大的、开源的Simultaneous Localization and Mapping(SLAM)库,专为机器人和无人驾驶领域设计。它提供了一套完整的解决方案,用于构建三维地图,并在未知环境中进行实时定位与导航。 github项目地址 RTAB-

weixin_45761399的博客 1万+

VUE 浏览器关闭时清空localStorage

1. 概述 1.1 说明 vue项目中,为了解决页面刷新时vuex数据丢失问题,使用localStorage进行存储对应的vuex数据(判断对应localStorage是否为空,不为空则为vuex中数据进行赋值),而localStorage的存储时间为长久存储,故为了数据安全则需在浏览器关闭时进行清空存储。 1.2 条件与思路 1.vue项目对应的单个网页刷新数据不丢失 --...

S_mile1992的博客 4492

MATLAB 车牌识别系统

车牌识别系统利用计算机视觉和图像处理技术,自动识别车辆牌照上的字符信息。本系统基于 MATLAB 实现车牌识别,包括图像预处理、车牌定位、字符分割、字符识别等模块。车牌识别系统是实现智能交通和公共安全的重要手段,具有广泛的应用前景。MATLAB 提供了丰富的工具和函数,可以方便地进行算法仿真和系统开发。

走向CTO的路上... 765

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

JS 之 cookie + localStorage 实践记录---实现:多选项卡网页,在刷新页面后,显示刷新前打开的选项卡

要实现的功能是这样: 1、一个后台管理系统,有多个选项卡页面,当打开多个页面时,刷新浏览器之后,除了主页面,其他页面一律消失 2、需要的效果:当打开多个页面时,刷新浏览器之后,显示 主页面 和 上一次打开的最后一个页面 ===============分割线================ 思路:需要在前端实时存储最后一个打开的选项卡。在JS 内部存储肯定不行,一旦刷新所有变量值都...

NRGAGA的专栏 1017

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

h5 储存 localStorage、sessionStorage、Cookie的区别及用法

https://segmentfault.com/a/1190000012057010 localStorage和sessionStorage使用时使用相同的API: localStorage.setItem("key","value");//以“key”为名称存储一个值“value” localStorage.getItem("key");//获取名称为“key”的值 ...

weixin_41796631的博客 481

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

解决页面关闭清除localStorage(解决)

最近有一个需求,页面某功能有默认的tab选中状态,同时用户可以手动设置状态并且页面刷新能够保存业务选中状态,于是使用了localStorage记录了部分信息。最初想使用vue的beforeDestroy生命周期,想着页面销毁时候触发清除事件,但是发现无论页面刷新还是关闭也么都不会触发,pass。查阅百度使用window的内置api,但是浏览器刷新时也会执行beforeunload, unload将我的数据清除,pass。关闭浏览器时清除localStorage,用户选着时重新存入localStorage。

qq1245460957的博客 4173

vue 判断窗口是关闭还是刷新 笔记

当前项目需求 : 1.在同一浏览器只能登录一个账号 2.在该浏览器下可以多窗口操作这一账号 3.当浏览器窗口刷新时不做任何操作,如果关闭浏览器则要清空登录信息 一: 首先把登录信息缓存在本地,通过localStorage 不用sessionStorage,因为sessionStorage缓存的数据在通过浏览器地址栏输入地址打开新窗口时 会新建一个 他们之间不共享,除非是在当前...

cscscssjsp的博客 5836

Vue项目保持用户登录状态(localStorage + vuex 刷新页面后状态依然保持)

使用localstorage和vuex实现用户登录状态的保持,刷新页面后依然存在,直到用户点击退出登录。附详细步骤及涉及知识点讲解。

商务合作 | 共同学习 | 携手共进 10万+

登录问题、前端区分刷新和关闭页面

理解:当用户直接关闭浏览器时 beforeunload 与unload时间间隔是很短的,但如果刷新两者时间间隔会很长(尤其是在beforeunload 加了以下代码后:会唤醒一个弹窗)到此,上述的四个要求基本满足,但仍存在一个问题,当我直接在浏览器地址栏输入其它非自己项目的地址(如 百度...之类的),此时再跳转回来,仍然是已登录状态,与。2. 当处于登录状态时,但页面处于登录页,要求刷新之后从login跳转到首页,并且登陆状态不允许直接跳转到login页面。1. 页面多开的情况下,登录状态必须一致。

qq_61986864的博客 1084

cookie,localStorage,sessionStorage的区别

用一张表格形象简单的说明一下: 大小 生命周期 作用域 是否参与和服务器的通信 API 相同点 sessionStorage 5M 页面关闭死掉(会话级别) 不同页或标签之间无法共享 否 4个方法: setItem (key, value) getItem (key) removeItem...

The One Who's at the Front 165

localStorage

document.getElementById("result").innerHTML="您已经点击了"+localStorage.num;document.getElementById("result").innerHTML="清除成功";

weixin_71439860的博客 157

在Vue中使用 localStorage

简介 sessionStorage(临时存储):为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载 loalStorage(长期储存):与sessionStorage一样,但是浏览器关闭后,数据依然会一直存在。 使用方法 sessionStorage 和 localStorage的用法基本一致,这里以localStorage 为例讲解。 (1)保存 //对象 const info = {name: "huo", age: 18,id: "1"} //字符串 const str

叱咤少帅的博客 2722
上一篇: 基于nodejs爬虫
下一篇: localStorage、sessionStorage、Cookie的区别和共同点
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值