ボタンでセッション全体のメッセージを削除しますか？

Question

モバイルデバイス（スマートフォンまたはタブレット）がポートレートモードになっているときに、次のコードを使用してメッセージを表示しています。これはうまく動作します！

しかし、ユーザーがXボタンをクリックすると、そのセッションでウェブサイトのページのいずれかが訪問されている限り、メッセージは表示されなくなります。

しかし、ウェブサイトが閉じている場合。次の訪問時に、ウェブサイトがポートレートモードで表示されたときにメッセージが再び表示されるはずです。

どうすればいいですか？

html, 
 
body { 
 
    width: 100%; 
 
    height: 200%; 
 
} 
 

 
#warning-message { 
 
    display: none; 
 
} 
 

 
@media only screen and (orientation:portrait) { 
 
    #warning-message { 
 
    display: block; 
 
    } 
 
} 
 

 
@media only screen and (orientation:landscape) { 
 
    #warning-message { 
 
    display: none; 
 
    } 
 
} 
 

 
#landscape-button { 
 
    background-color: #2A3847; 
 
    color: #ffffff; 
 
    border-radius: 0px; 
 
    border: 1px solid white; 
 
    padding: 10px 10px 10px 10px; 
 
    float: right; 
 
    margin-top: -25px; 
 
    margin-right: -15px; 
 
    font-size: 1.3em; 
 
}

Please open in "full page" mode and scale your window to a portrait size to see the message appear.<br><br> 
 
<div id="warning-message" style="position:fixed; margin: 0 auto 0 auto; z-index: 99999999; background-color: #2A3847; width: 90vw; min-height: 90vh; text-align:center; padding:25px 15px 35px 15px; right: 0; 
 
    left: 0; 
 
    margin-right: auto; 
 
    margin-left: auto;"> 
 
    <button type="button" id="landscape-button">X</button> 
 
    <p style="font-size: 1.3em; color: #ffffff; positie:absolute; text-align:center;"><span style="margin: 0 0 0 25px; text-align:center; font-size: 2em; letter-spacing: -0.04em;">please rotate your screen</span><br><br>This website is best viewed in landscape mode. So please, rotate your mobile device, and if activated also disable 
 
    your screen rotation lock. If you prefer to remain in portrait mode, ignore this message and close it at the "x".</p> 
 
</div>

Answer 1

以下は、「X」ボタンをクリックした後にのみセッションストレージが開始されることを考慮して、どのように動作するかです。したがって、クローズボタン "X"をクリックする前にページを再読み込みしても、ウィンドウのサイズがポートレートモードに設定されている場合、またはモバイルデバイスがポートレートモードに保持されている場合、メッセージは引き続き表示されます。 「X」ボタンをクリックすると、同じセッション内でページをリロードするとメッセージは表示されなくなります。

See the example here!

$(document).ready(function() { 
    var data = sessionStorage.getItem('isfirst'); 
    if (data == undefined) { 
     $("#warning-message").addClass("shown-modal"); 
    } else { 
     $("#warning-message").hide(); 
    } 
}); 
//close the pop 
$("#landscape-button").on('click', function() { 
    sessionStorage.setItem('isfirst', 'true'); 
    $("#warning-message").hide(); 
}); 

Answer 2

あなたはのsessionStorageを使用したいと思う - ユーザが "X" をクリックするとhttps://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

を：

sessionStorage.setItem('closed', 'true'); 

再ロードするページ：

var data = sessionStorage.getItem('key'); 
if (data == 'true') { 
    // do nothing 
} else { 
    // display block 
}