こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！
今回は、JavaScriptの小ネタです。
1回目と2回目以降のアクセスを判別するスクリプトをご紹介します。
セッションストレージを使う
セッションストレージとは、セッションを単位としてデータを保存しておく場所です。
セッションを開始すると生成され、終了すると消去されます。
このセッションストレージを使えば、1回目のアクセスか、2回目以降のアクセスかどうか簡単に判別することができます。
使い方
以下のコードを記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function () {
if (sessionStorage.getItem('access')) {
$('p').html('2回目以降のアクセスです')
} else {
$('p').html('1回目のアクセスです')
sessionStorage.setItem('access', 'true');
}
});
</script>
</head>
<body>
<p></p>
</body>
</html>保存してブラウザで確認すると、何回目かのアクセスか表示されるはずです。
解説
まず、jQueryを使用していますので、5行目にjQueryを読み込んでいます。
8行目からがセッションストレージのコードです。
1回目のアクセスは、データは保存されていないので、elseの中が実行され、「1回目のアクセスです」と表示されます。
さらに、その下の記述でセッションストレージに「access」という値を保存しています。
2回目以降のアクセスは、セッションストレージに「access」が保存されている状態になるので、分岐がifに入り、「2回目以降のアクセスです」と表示されます。
使い道
1回目か2回目以降か判別する使い道ですが、良く見るのは、1回目だけモーダルで動画を再生させるものです。
特に見せたいものや演出として、全画面再生させているサイトを良く見ます。
ただ、全画面再生は、インパクトがあって見せたいものをユーザーに伝えられるかもしれませんが、アクセスする度に再生されると、ユーザーの手を止めてしまうことになるので、直帰率が悪くなってしまいます。
こうゆうときに、1回目だけ全画面再生させて、2回目以降は再生させないようにすれば、サイト全体を見てくれる率が高くなります。
最後に
以上、1回目と2回目以降のアクセスを判別するスクリプトをご紹介しました。
このスクリプトは汎用性が高く、色々な場面で使用できるので、覚えておくとどこかで役に立つと思います。
参考になれば嬉しいです。
最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。
コメント