Chỉ hiển thị cửa sổ bật lên jQuery tại lần truy cập đầu tiên của một trang

Question

Tôi mới sử dụng jQuery và tôi có một số nhu cầu trên trang web của mình. Tôi muốn hiển thị cửa sổ bật lên div của jQuery ở lần đầu tiên chỉ khi người dùng đến. Không cần phải hiển thị một lần nữa và một lần nữa.

Tôi vẫn đang sử dụng này, nhưng tôi không biết làm thế nào để ẩn ở lần thứ hai:

var isshow=0; 
$(document).ready(function() { 
    if (isshow == 0) { 
    $('#jPopup').show(); 
    } 
    isshow = 1; 
}); 

Nhưng biến ishow khởi mỗi lần.

Answer 1

Bạn có thể sử dụng localstorage. Nó rất dễ hiểu và dễ sử dụng.

$(document).ready(function() { 
    var isshow = localStorage.getItem('isshow'); 
    if (isshow== null) { 
     localStorage.setItem('isshow', 1); 

     // Show popup here 
     $('#jPopup').show(); 
    } 
}); 

Nó sẽ hiển thị cho bạn cửa sổ bật lên ở lần truy cập đầu tiên trên trang web của bạn.

Answer 2

Bạn có thể sử dụng SessionStorage hoặc LocalStorage cho điều này theo nhu cầu của mình.

Nếu bạn chỉ cần thực hiện phiên đó, hãy sử dụng SessionStorage. Nếu nó được lưu trữ vĩnh viễn trong trình duyệt của người dùng, hãy sử dụng LocalStorage.

$(document).ready(function(){ 
     if(sessionstorage && !sessionStorage.getItem('isshow')){ 
      $('#jPopup').show(); 
      sessionStorage.setItem('isshow', true); 
     } 
    }); 

Answer 3

Bạn có thể sử dụng localStorage cho mục đích này như sau:

$(document).ready(function(){ 
    var shown= localStorage.getItem('isshow'); 
    if(shown !="t"){ 
     $('#jPopup').show(); 
     localStorage.setItem('isshow', "t"); 
    } 
}); 

Answer 4

Bạn cần phải giấu nó vào tải hoặc làm điều đó trong css (recommended) và sau đó kiểm tra localStorage để xem nếu nó là chuyến thăm đầu tiên.

$(document).ready(function() { 
     $('#jPopup').hide(); //hide on load or in css, later check if its the first visit 
     var isshow= localStorage.getItem('status'); 
     //check if it is the first visit 
     if (isshow == null || isshow == '') { 
      //set variable to 1 
      localStorage.setItem('isshow', 1); 
      $('#jPopup').show(); 
     } 
     }); 

Answer 5

Bạn có thể đặt một cookie để lưu trữ một giá trị và kiểm tra nếu nó không được thiết lập sau đó hiển thị popup:

$(document).ready(function() { 
    var isshow = $.cookie("isshow"); 
    if (isshow == null) { 
     $.cookie("isshow", 1); // Store 

     // Show popup here 
     $('#jPopup').show(); 
    } 
}); 

Hoặc bạn có thể đặt localStorage. Đây là một ví dụ làm việc. jsFiddle

$(document).ready(function() { 
    if(localStorage.getItem('popState') != 'shown') { 
     $("#popup").delay(2000).fadeIn(); 
     localStorage.setItem('popState','shown') 
    } 
});