質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

4842閲覧

jQueryもしくはJavaScriptでブラウザのセッション情報の有無によって処理を変更したい

abab7200

総合スコア120

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/06/09 02:47

編集2018/06/09 04:41

JqueryでsessionStorageを保持して、保持しているかしていないかで条件を変更しようと考えていますが
セッション保持の判定条件が起動しないので、どなたかご教授いただければと存じます。

そもそもやりたいこと
・指定値までスクロールしたらモーダルを表示する。一度スクロールしてモーダルが表示された場合は、2回目から
表示させたくはないので、sessionStorageを保持して対応しようと考えました。

sessionStorageが保持されていれば、何も表示せず、
保持されていないかつ指定値までスクロールしたらモーダルを表示する。ようにしたいです。

※セッション以外でやりたいことが対応可能であれば、その点についてもご教授いただければと存じます

現状の状態
sessionStorageの保存まではできたのですが、セッションが保持されているかの判定状態の部分のイベントがそもそも起動していません。 if (str.length == 0) 配下の部分です。

<!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 () { $(window).scroll(function () { var num = 1; sessionStorage.setItem('access_count', num); window.sessionStorage.setItem('access_count', num); var str = sessionStorage.access_count = num; console.log(str); 以下からイベントが起動しない if (str.length == 0) { if ($(this).scrollTop(str) > 110) { $('#modal-sample').modal('show'); console.log("モーダルを表示"); } else { console.log("セッションあり"); } } }); }); </script> <style> </style> </head> <body> <div> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> <p> テスト </p> </div> <!-- 1.モーダルを表示する為のボタン --> <button class="btn btn-primary" data-toggle="modal" data-target="#modal-sample"> モーダルを表示 </button> <div class="modal fade" id="modal-sample" tabindex="-1"> <div class="modal-dialog"> <!-- 3.モーダルのコンテンツ --> <div class="modal-content"> <!-- 4.モーダルのヘッダ --> <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> <!-- 5.モーダルのボディ --> <div class="modal-body"> コンテンツの本文 </div> <!-- 6.モーダルのフッタ --> <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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/06/09 03:12

質問者さんの言う「ブラウザのセッション情報」とは何なのですか? 例えば、ASP.NET の場合は各ユーザーのセッション情報はサーバーのメモリとか DB に保持され、セッションクッキーによってユーザーを識別し、必要に応じてサーバーでメモリとか DB から取得するようになっています。そのようなものではなくて独自実装ですか?
abab7200

2018/06/09 04:40

html5のsessionStorageの事を指しております、 内容を追記しました
guest

回答1

0

ベストアンサー

セッションの保存まではできたのですが、セッションが保持されているかの判定状態の部分のイベントがそもそも起動していません。
if (str.length == 0) 配下の部分です。

↑言っている意味がよくわかりませんが、「ifブロック内の処理が実行されず、常にelseブロック内の処理が実行される」ということ?

sessionStorage.setItem('access_count', num); // ↑ セッションにキー名「access_count」&値「num」を格納している window.sessionStorage.setItem('access_count', num); // ↑ セッションにキー名「access_count」&値「num」を格納している var str = sessionStorage.access_count = num; // ↑ セッションにキー名「access_count」&値「num」を格納してから、格納済みの値(num)をstrに入れている

↑そもそもここで同じことを何度もやっているのがわかりませんが、初回かどうかの判定なら直接sessionStorageを参照すればいいのでは?

let key = 'access_count'; if(!window.sessionStorage.getItem(key)){ // <= セットされてなければnullなのでこのブロックに入る。 // 初回なのでsessionStorageに値を格納 window.sessionStorage.setItem(key, 1); // そのほか必要な処理 }else{ // 初回以外の処理 }

投稿2018/06/09 03:10

tkturbo

総合スコア5572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

abab7200

2018/06/09 04:41

対応できました。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問