ここに簡単なアラートボックスがあります：
/* The alert PROMO box */
.promobox {
padding: 10px;
background-color: #415ca2; /* Blue */
color: white;
margin-bottom: 7px;
}
/* The close button */
.closebtnpr {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 18px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
/* When moving the mouse over the close button */
.closebtn:hover {
color: black;
}<div class="promobox">
<span class="closebtnpr" onclick="this.parentElement.style.display='none';">×</span>
<center><b>U.S. POLO ASSN. DAY!</b></center>
</div>（x）をクリックすると、要素が非表示になります。しかし、ページを更新すると、アラートボックスが再び表示されます。
Webサイトの閲覧が終了するまで、アラートボックスを閉じるという選択をどのように思い出すことができますか？
update2：
sessionStorage.setItem('myCat', 'Tom');
次の例では、テキストフィールドの内容を自動保存し、ブラウザが誤って更新された場合に、書き込みが失われないようにテキストフィールドの内容を復元します。
// Get the text field that we're going to track
let field = document.getElementById("field");
// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (sessionStorage.getItem("autosave")) {
// Restore the contents of the text field
field.value = sessionStorage.getItem("autosave");
}
// Listen for changes in the text field
field.addEventListener("change", function() {
// And save the results into the session storage object
sessionStorage.setItem("autosave", field.value);
});
あなたはほとんどあなたの最後の編集でそれを手に入れました。sessionStorage（またはデータを永続化する場合はlocalStorage）を使用します。jsで直接display属性を変更する代わりに、cssクラスを使用し、ユーザーが以前にそれを閉じなかった場合は削除します。sessionStorage変数にブール値を使用します。
このコードスニペットはサンドボックス環境では機能しません
document.addEventListener("DOMContentLoaded", function() {
let dismissed = sessionStorage.getItem("dismissed");
let alertDiv = document.getElementById("alert");
let dismissButton = document.getElementById("dismiss");
if(!dismissed){
alertDiv.classList.remove("hide");
}
addEventListener("click", function(){
alertDiv.classList.add("hide");
sessionStorage.setItem("dismissed", true);
});
});.alert{border: 1px dashed lime; font-size: x-large; display: inline-block}
.hide{display: none}<div class="alert hide" id="alert">
SOME ANNOYING ALERT HERE!
<button type="button" id="dismiss">X</button>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加