如何使 'me' 元素仅在您第一次使用 javascript 加载主页时显示？

Question

< script >
setTimeout(() => {
document.getElementById('me').classList.add('fade');
}, 1700); <
/script>

这是我制作的代码，因此当访问者在主页上时，图片会立即淡出。是否有要添加的 JavaScript 代码使其只显示一次？如果他们使用链接然后回来，我不希望它再次显示。

Answer 1

检查JSFIDDLE，只允许在 jsFiddle 上使用

(function(){
	const reset = document.querySelector('.reset');
	const update = document.querySelector('.update');
	const status = document.querySelector('p b');
	const image = document.querySelector('img');
	const isLoaded = !!localStorage.getItem('already-loaded');
	if (!isLoaded) localStorage.setItem('already-loaded', true);
	reset.addEventListener('click', () => {
		localStorage.removeItem('already-loaded');
		location.reload();
	});
	update.addEventListener('click', () => location.reload());
	
	status.innerHTML = isLoaded ? 'already loaded' : 'first time here';
	image.style.display = isLoaded ? 'none' : 'block';
})//() this does not work on stackoverflow

<button class="reset">reset</button>
<button class="update">update</button>
<p>Status: <b></b></p>
<img src="https://i.picsum.photos/id/400/500/300.jpg" alt="">