2 flat logo on transparent 256
2018-06-09
2019-05-18

LocalStorageとBootstrapのモーダルを利用する

Storage1221

Bootstrapのモーダルウインドウは使いやすくて様々な利用シーンがあります。

ただ、キャンペーンなどでモーダルウインドウを利用する場合 ページの読み込み毎にモーダルウインドウが表示されないよう ユーザーがモーダルウインドウを閉じた情報をクッキーで取得することもあるかと思います。

今回クッキーではなくLocalStorageでモーダルウインドウを展開した情報を保存し、2回目からモーダルウインドウが表示されないように設定します。

なおLocalStorageはHTML5で実装されているので、古いブラウザだと動作しません。

モーダルウインドウの解説は以下から御覧ください。

Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き

そもそもLocalStorageとは

LocalStorageはフロントエンドでのみ利用でき、半永久的に保存できる、データの保存形式です。

クッキーとの違い

1: サーバへ値を送信しないので、通信の影響を受けない

2: ブラウザを閉じても有効

3: 保存容量がM単位(クッキーは4kb)

以上のように大容量の情報を半永久的にブラウザに保存できます。

そのため Amazonの最近みた商品の機能やスマホのブラウザでも利用されています。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>テスト</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            let key = 'storage_key';

            if (!window.localStorage.getItem(key)) {
//                sessionStorageにkeyがなければこの処理がかどう
                window.localStorage.setItem(key, 1);

                //モーダルウインドウを表示
                $('#modal-sample').modal('show');

            } else {
                console.log("モーダルが表示されない");
//                以下コメントアウトを消去して再度読み込むとlocalStorageが削除される
//                           window.localStorage.clear();
            }
        });

    </script>

    <style>


    </style>
</head>
<body>


<div>
    <p>
        SEOは自分のサイトを検索サイトで上位に表示されるように対策を行うことを言います。
    </p>
    <p>
        例えば、Googleなどでプログラミングと検索したら、自分のサイトが上位に表示される用にするなどです。
    </p>
    <p>
        ただ、プログラミングのキーワードは検索されるボリュームが多いためなかなか上位に表示されません。
    </p>
    <p>
        その為、大きなキーワードで上位を狙うよりは、「プログラミング ruby」 など
    </p>
    <p>
        複数のキーワードで検索された際に上位に表示されるようにすることを目標とした方がよいです。
    </p>
    <p>
        SEO対策には内部対策と外部対策があります。
    </p>
    <p>
        内部対策は自分のサイトをGoogleに解析してもらいやすくする対策で
    </p>
    <p>
        詳細な対策内容は下記URLに記載しています。
    </p>
    <p>
        https://programming-beginner-zeroichi.jp/articles/82
    </p>
    <p>
        外部対策は
    </p>
    <p>
        他のサイトから自身のサイトをリンクを設定してもらう対策です。
    </p>
    <p>
        一般的に外部対策は直ぐには行うことができません。
    </p>
    <p>
        理由はコンテンツの量が少ないサイトは他サイトでも紹介されないためです。
    </p>
    <p>
        即効性はないですが、今直ぐできる外部対策の詳細は下記リンクを御覧ください
    </p>
    <p>
        https://programming-beginner-zeroichi.jp/articles/81
    </p>
</div>


<div class="modal fade" id="modal-sample" tabindex="-1">
    <div class="modal-dialog">

        <!-- 1.モーダルのコンテンツ -->
        <div class="modal-content">
            <!-- 2.モーダルのヘッダ -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="modal-label">モーダルのタイトルを表示する</h4>
            </div>
            <!-- 3.モーダルのボディ -->
            <div class="modal-body">
                コンテンツの本文
            </div>
            <!-- 4.モーダルのフッタ -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>

コード解説

LocalStorage からデータを取得する

以下でLocalStorage からデータを取得します。 今回は!を付けデータがなければ、セットするように設定します

 localStorage.getItem(key);

LocalStorage へデータを設定する

setItem(key,value)で設定します。今回は1を設定しています。

また、クッキーと同様に文字しか登録はできません。

localStorage.setItem(key, 1)

LocalStorage へデータをクリアする

以下でLocalStorageのデータをクリアします。

今回はコメントアウトをしていますが、コメントアウトを消去し 再読込すれば再度モーダルウインドウが表示されます。

localStorage.clear();

以上になります

その他関連記事

Bootstrapでモーダルウインドウをカスタマイズする|コピペで動くサンプル付き

Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き

Bootstrapでパンくずリストを設定する|コピペで動くサンプル付き

エックスサーバーへWordPress(ワードプレス)の簡単インストールを行う

CSS3でhoverした時に背景をふわっと変更する|コピペで動くサンプル付き

前の記事
次の記事
人気記事
カテゴリーから記事を探す