WebStorageで1回目のアクセス時のみモーダルを表示する

WebStorageを使って、1回目のアクセス時のみモーダルを表示するサンプルを作ってみます。

サンプルコード

WebStorageにはセッションを保持している間だけデータを保存できるsessionStorageと、永続的にデータを保存できるlocalStorageがあるので、それぞれで実装してみます。
まずはsessionStorageでやってみます。

HTML

<div id="c-modal_bg"></div>
<div id="c-modal">
	<p>モーダルの中身です。<br />
	モーダルの中身です。<br />
	モーダルの中身です。</p>
	<div id="c-modal_close">閉じる</div>
</div>

CSS

#c-modal_bg {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.6);
}
#c-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 9999;
	width: 600px;
	height: 400px;
	transform: translate(-50%, -50%);
	background: #ffffff;
}
#c-modal_close {
	padding: 5px;
	cursor: pointer;
}

JavaScript(モーダル部分)

// モーダルの処理
var bg = document.getElementById('c-modal_bg');
bg.addEventListener('click', modal_close, false);

var close = document.getElementById('c-modal_close');
close.addEventListener('click', modal_close, false);

function modal_close() {
	var modal = document.getElementById('c-modal');
	modal.style.display = 'none';
	bg.style.display = 'none';
}

モーダルを閉じる関数(modal_close())を用意して、背景か閉じるボタンをクリックした時にモーダルを閉じるようにしています。
以下が1回目かどうかを判別する処理になります。

JavaScript(1回目か判別する部分)

// 1回目のアクセスかどうか
if(sessionStorage.getItem('acs') === null) {
	// 1回目の場合はWebStorageを設定
	sessionStorage.setItem('acs', 'on');
} else {
	// 2回目以降の場合はモーダルを削除
	modal_close();
}

これでセッションを保持している間は2回目以降モーダルが表示されなくなりました、
sessionStorageで2回目にモーダルを表示させないデモページ
　

次にlocalStorageでやってみます。
HTMLとCSS、モーダルのJavaScriptは同じなので省略します。

JavaScript

// 1回目のアクセスかどうか
if(localStorage.getItem('acs') === null) {
	// 1回目の場合はWebStorageを設定
	localStorage.setItem('acs', 'on');
} else {
	// 2回目以降の場合はモーダルを削除
	modal_close();
}

処理自体はsessionStorageと同じ流れですが、タブやブラウザを閉じた場合にもモーダルの非表示が続くようになりました。
localStorageで2回目にモーダルを表示させないデモページ
　

チェックボックスで「次回以降表示しない」を設置する

先ほどは2回目のアクセスで表示しないようにしましたが、モーダル内にチェックボックスを用意して、次回モーダルを表示するかどうかを選択できるようにしてみます。
モーダル内にチェックボックスを用意します。

HTML

<div id="c-modal_bg"></div>
<div id="c-modal">
	<p>モーダルの中身です。<br />
	モーダルの中身です。<br />
	モーダルの中身です。</p>
	<p><input type="checkbox" name="acs_next" value="" />次回以降表示しない</p>
	<div id="c-modal_close">閉じる</div>
</div>

JavaScript

// モーダルの処理
var bg = document.getElementById('c-modal_bg');
bg.addEventListener('click', modal_close, false);

var close = document.getElementById('c-modal_close');
close.addEventListener('click', modal_close, false);

function modal_close() {
	var modal = document.getElementById('c-modal');
	modal.style.display = 'none';
	bg.style.display = 'none';

	// チェックボックスにチェックが入っている場合は、次回以降表示しないようにする
	if(document.getElementsByName('acs_next')[0].checked) {
		sessionStorage.setItem('acs2', 'on');
	}
}

// 「次回以降表示しない」にチェックを入れていない場合
if(sessionStorage.getItem('acs2') === null) {

} else {
	// チェックを入れている場合はモーダルを削除
	modal_close();
}

先ほどはsessionStorageを1回目のアクセス後に保存するようにしていましたが、今回はモーダルを閉じるときにチェックボックスにチェックが入っているかを確認して、チェックされている場合のみsessionStorageを保存するようにしています。
sessionStorageで「次回以降表示しない」を実装するデモページ
　

次にlocalStorageの場合です。

JavaScript

// モーダルの処理
var bg = document.getElementById('c-modal_bg');
bg.addEventListener('click', modal_close, false);

var close = document.getElementById('c-modal_close');
close.addEventListener('click', modal_close, false);

function modal_close() {
	var modal = document.getElementById('c-modal');
	modal.style.display = 'none';
	bg.style.display = 'none';

	// チェックボックスにチェックが入っている場合は、次回以降表示しないようにする
	if(document.getElementsByName('acs_next')[0].checked) {
		localStorage.setItem('acs2', 'on');
	}
}

// 「次回以降表示しない」にチェックを入れていない場合
if(localStorage.getItem('acs2') === null) {

} else {
	// チェックを入れている場合はモーダルを削除
	modal_close();
}

基本的な流れはsessionStorageと同様です。
localStorageで「次回以降表示しない」を実装するデモページ