页面上.box只显示一次，后面刷新不显示。
浏览器新建窗口一次窗口可以打开，再次刷新就不显示。
html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 浏览器窗口只打开一次 title>
<script src="https://code.jquery.com/jquery-1.7.2.js">script>
head>
<body>
<style type="text/css">
.box{width:100px;height:100px;margin:100px auto;background:#ff6600;}
style>
<div class="box">div>
<script>
script>
body>
html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 浏览器窗口只打开一次 </title>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>
<style type="text/css">
.box {
width: 100px;
height: 100px;
margin: 100px auto;
background: #ff6600;
}
</style>
<div class="box"></div>
<script>
let hasBox = sessionStorage.getItem('hasBox')
if (!hasBox) {
$('.box').show();
sessionStorage.setItem('hasBox', true)
} else {
$(".box").remove();
}
</script>
</body>
</html>
可以利用浏览器的localStorage，进入页面时判断判断localStorage.getItem('isFirst')是否存在，如果不存在setItem(isFirst，随便写个值)，如果存在就隐藏box
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 浏览器窗口只打开一次 </title>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>
<style type="text/css">
.box{width:100px;height:100px;margin:100px auto;background:#ff6600;}
</style>
<div class="box"></div>
<script>
window.onload = function () {
if(!localStorage.getItem('box')) {
localStorage.setItem('box', 1);
} else {
const box = document.getElementsByClassName('box')[0];
box.style.display = 'none';
}
}
</script>
</body>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 浏览器窗口只打开一次 </title>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>
<style type="text/css">
.box{width:100px;height:100px;margin:100px auto;background:#ff6600;display:none}
</style>
<div class="box"></div>
<script>
var hasBox = sessionStorage.getItem('hasBox')
if (!hasBox) {
document.getElementsByClassName('box')[0].style.display = 'block'
sessionStorage.setItem('hasBox', true)
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 浏览器窗口只打开一次 </title>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>
<style type="text/css">
.box{width:100px;height:100px;margin:100px auto;background:#ff6600;display:none}
</style>
<div class="box"></div>
<script>
var flag= localStorage.getItem('isTrue')
if (!isTrue || isTrue!= 1) {
document.getElementsByClassName('box')[0].style.display = 'block'
localStorage.setItem('isTrue', 1)
}
</script>
</body>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 浏览器窗口只打开一次 </title>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>
<style type="text/css">
.box {
width: 100px;
height: 100px;
margin: 100px auto;
background: #ff6600;
}
</style>
<button onclick="localStorage.removeItem('LOCK')">清除缓存</button>
<div class="box"></div>
<script>
if (localStorage.getItem('LOCK')) {
$('.box').hide()
} else {
let num = 3;
localStorage.setItem('LOCK', 1);
let timer = setInterval(() => {
--num;
$('.box').text(num)
if (num == 0) {
$('.box').hide()
clearInterval(timer);
}
}, 1000);
}
</script>
</body>
</html>