ウェブサイトやブログで、ユーザーが初めて訪問した際にだけ特定のメッセージや要素を表示したいと思うことはありませんか？これを実現するために、JavaScriptとlocalStorageを利用する方法をご紹介します。localStorageは、ブラウザにデータを保存するための便利なAPIで、ユーザーの訪問履歴を追跡するのに役立ちます。
localStorageを利用して初回訪問をチェックする
localStorageを使って、ユーザーがサイトを初めて訪問したかどうかを確認することができます。以下のコードは、ページを初めて訪問したユーザーに対して、特定の要素（例: #welcome-message）を表示する方法を示しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初回訪問時の要素表示</title>
<style>
#welcome-message {
display: none;
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div id="welcome-message">ようこそ！初めての訪問ですね。</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// localStorageから訪問履歴を取得
const visited = localStorage.getItem('visited');
// 初回訪問の場合
if (!visited) {
// 要素を表示
document.getElementById('welcome-message').style.display = 'block';
// localStorageに訪問済みとして記録
localStorage.setItem('visited', 'true');
}
});
</script>
</body>
</html>コードの説明
localStorageから訪問履歴を取得
localStorage.getItem(‘visited’)で、ユーザーの訪問履歴を取得します。初回訪問の場合はnullが返ります。
初回訪問の場合の処理
visitedが存在しない場合（つまり、初回訪問時）は、#welcome-message要素のdisplayプロパティをblockに設定し、要素を表示します。
表示後、localStorage.setItem(‘visited’, ‘true’)で訪問済みとして記録します。これにより、次回以降の訪問ではこの要素が表示されることはありません。
実装のポイント
- データの保存: localStorageはブラウザのストレージにデータを保存します。これにより、ユーザーがページをリロードしたり、ブラウザを閉じて再度開いたりしても、データは保持されます。
- 要素のスタイル: 初回訪問時に表示する要素は、CSSでdisplay: noneに設定しておくと良いでしょう。これにより、初回訪問以外の訪問時には要素が表示されないようになります。
まとめ
この方法を活用すれば、ユーザーに対して初回訪問時に特別なメッセージを表示したり、ウェルカムメッセージを提供することができます。ユーザー体験を向上させるための一つのテクニックとして、ぜひ試してみてください。
