【セッションストレージ】sessionStorageを使ってブラウザの保存状態を確認

ブラウザの状態を保存したり取得したいときにsessionStorageをつかうことで可能です。

今回はこのsessionStorage（セッションストレージ）について紹介していきたいと思います。

sessionStorageで出来ること

sessionStorageをつかうことで、データの保存、取得、削除、初期化（保存したデータを全て削除）をすることができます。

sessionStorage機能

setItemメソッド

データを保存するときはsetItemメソッドを使います。

getItemメソッド

sessionStorageに保存したデータを取得することができます。

removeItemメソッド

sessionStorageに保存したデータを削除することができます。

clearメソッド

sessionStorageに保存したデータを全て削除することができます。

セッションストレージによって要素を非表示にする

sessionStorageを使った例としてモーダルの閉じるを押したときに閉じたことを保存しておき、ブラウザを閉じるまでは非表示にする。

ブラウザが閉じたら削除してまた表示されるという処理をしたいと思います。

html

<div class="bnr">
    <span class="close">閉じる</span>
    <img src="https://placehold.jp/150x150.png" alt="バナー">
</div>

css

.bnr {
    display: none;
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}
.close {
    display: inline-block;
    padding: 5px 10px;
    background-color: #000;
    color: #fff;
    cursor: pointer;
    margin-top: 10px;
    border-radius: 5px;
}
.bnr img {
    max-width: 100%;
    height: auto;
}

javascript

document.addEventListener("DOMContentLoaded", function () {
    //セッションストレージを確認して非表示にするか判断する
    if (sessionStorage.getItem('modalClosed') !== 'true') {
		document.querySelector('.bnr').style.display = 'block';
    } else {
		document.querySelector('.bnr').style.display = 'none';
    }
 
	//「close」ボタンがクリックされたら処理
    document.querySelector('.close').addEventListener('click', function () {
	// モーダルを非表示にする
	document.querySelector('.bnr').style.display = 'none';
	// セッションストレージに閉じたことを保存
	sessionStorage.setItem('modalClosed', 'true');
    });
});

sessionStorageをつかうことでブラウザの状態を簡単に確認して処理をすることができます。