Chỉ hiển thị div chào mừng một lần cho mỗi phiên người dùng/trình duyệt

Question

Tôi chỉ muốn hiển thị div chào mừng một lần cho mỗi người dùng hoặc phiên. Tôi biết rằng có tùy chọn Jquery. Kể từ khi một người mới đến jquery, tôi đã không thể giải quyết nó bản thân mình. Xin vui lòng giúp

$(document).ready(function() { 
 
    $("#close-welcome").click(function() { 
 
    $(".welcome").fadeOut(1000); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="welcome"> 
 
    <div> 
 
    <h1>Hello..!<br> Welcome to ABC 
 
    <br> 
 
    </h1> 
 
    <h2>We wish you a Great Day..!</h2> 
 
    <br> 
 

 
    <h2><a id="close-welcome" href="#">Thank you.. and please take me to the  website</a> </h2> 
 
    </div> 
 
</div>

Tôi muốn hiển thị trang chào mừng này chỉ một lần, cho đến khi người dùng đóng trình duyệt .. Đang chờ sự giúp đỡ quý báu

Answer 1

Đặt một cookie.

$(document).ready(function() { 
    if ($.cookie('noShowWelcome')) $('.welcome').hide(); 
    else { 
     $("#close-welcome").click(function() { 
      $(".welcome").fadeOut(1000); 
      $.cookie('noShowWelcome', true);  
     }); 
    } 
}); 

Bạn cần bao gồm tệp JavaScript jQuery.cookie.

https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js

Answer 2

Đó là tốt hơn bởi vì chúng ta sẽ không thấy nhấp nháy khi lẩn trốn trên ruồi

<a href="" id="close-edu" class="waves-effect"><span class="edu" style="display: none;">New</span></a> 

jquery

$(document).ready(function() { 
    if ($.cookie('noShowEducation')) ; 
    else { 
     $('.edu').show(); 
     $("#close-edu").click(function() { 
      $(".edu").fadeOut(1000); 
      $.cookie('noShowEducation');  
     }); 

    } 
}); 

Answer 3

Trong trường hợp khách hàng của bạn không ăn bánh

Bạn có thể sử dụng sessionStorage, sau khi tất cả đó là những gì họ có nghĩa là cho chính xác, giữ một bộ sưu tập dữ liệu trong tay trong suốt phiên.

Để có trải nghiệm người dùng tốt nhất, bạn nên bắt đầu với thuộc tính ban đầu [wellcomeElement] .style.display = "none" trong CSS hiện tại của bạn.

Vì vậy, toàn bộ quy trình sẽ trở nên đơn giản như ...

1. kiểm tra nếu các thông điệp chào mừng đã được chứng minh
2. Show! : Không hành động!

Xong.

Ví dụ Code:

"message" in sessionStorage ? 0 : 
    [wellcomeElement].style.display = "block", 
    sessionStorage.setItem("message",true); 

Các snip mã có thể được đặt, (nhưng tốt hơn) trong một kịch bản-tag ngay sau khi các yếu tố thông điệp chào mừng.

Tuy nhiên, để tương thích ngược đầy đủ, bạn luôn có thể quay lại sử dụng tên phiên tài sản như trong:

/message/.test(name) ? 0 : 
[wellcomeElement].style.display = "block", 
name = 'message'; 

trọng.