ある要素を、初回アクセス時にのみ表示したい（ブラウザのタブ単位で）

###前提・実現したいこと
ウェブサイトの初回アクセス時にのみ、<p id="test01">初回のみ表示</p>の要素を表示させたいと考えています。
ただし、ブラウザの該当タブを閉じた後に、再度、新しいタブやブラウザでウェブサイトを閲覧した時には、再び<p id="test01">初回のみ表示</p>が表示されるようにしたいです。

つまり、ブラウザのタブ単位でのアクセス履歴（？）を保存しながら要素の表示・非表示を操作したいのですが、そのようなことは可能でしょうか？

###該当のソースコード

html
1<section>
2<p id="test01">初回のみ表示</p>
3<p id="test02">常に表示</p>
4</section>

###試したこと
「webstorage」というものを利用すれば実現できそうな気がしたのですが、そもそも本当に実現できるのかが分からず、またどのように設定すれば良いのか分からず詰まってしまい、こちらにご質問させていただきました。

行動規範の内容に同意します

回答2件

試してみては？

JavaScript
1document.addEventListener("DOMContentLoaded", function(event) {
2  if (sessionStorage.getItem('accessed')) {
3    document.getElementById('test01').style.display = 'none';
4  } else {
5    sessionStorage.setItem('accessed', '1');
6  }
7});

投稿2017/12/12 08:38

x_x

総合スコア13749

退会済みユーザー

2017/12/12 08:59

ご回答ありがとうございます。先にご回答いただいた方とは、また違うコードの書き方をご提案いただき大変参考となりました。勉強させていただきます。

行動規範の内容に同意します

ベストアンサー

sessionStorageを利用してはどうでしょうか。
https://developer.mozilla.org/ja/docs/Web/API/Window/sessionStorage

html
1<!DOCTYPE html>
2<html>
3<head>
4<script>
5document.addEventListener("DOMContentLoaded", () => {
6	if (sessionStorage.getItem("visited")) {
7		document.getElementById("test01").remove();
8	} else {
9		sessionStorage.setItem("visited", 1)
10	}
11});
12</script>
13</head>
14<body>
15<section>
16<p id="test01">初回のみ表示</p>
17<p id="test02">常に表示</p>
18</section>
19</body>

投稿2017/12/12 08:31

ku__ra__ge

総合スコア4524

退会済みユーザー

2017/12/12 08:44

ご回答いただきありがとうございます。こちらで実現できると思うのですが、たとえば要素の表示・非表示だけではなく、仮に「初回のみ、とある関数を実行したい」といった場合も同様の書き方で宜しいのでしょうか？たとえば下記のhoge();を初回のみ実行したい場合なのですが・・ var hoge = function(){ console.log('あいうえお'); }; 重ねてのご質問となり大変恐縮ですが、何卒ご教示いただけますと幸いです。

退会済みユーザー

2017/12/12 08:56

上記の件、自己解決いたしました。（もしコメントが入れ違いになっておりましたら申し訳ございません）

行動規範の内容に同意します

あなたの回答