Tìm kiếm nhanh

[JavaScript] Sơ lược về jQuery Cookie

Thảo luận trong 'Các Vấn Đề Khác' đăng bởi anhyeuviolet, 02/08/2016 23:16.

  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

    Mục đích: Dành cho ai đang tìm hiểu về jQuery ( trong đó có cả người đang viết mấy dòng này ).

    Yêu cầu chung: Đọc hiểu code HTML/JS.

    Yêu cầu nâng cao: Chưa biết gì về JS Cookie này.

     

    Chống chỉ định: Admin của forum này, cũng như các chuyên gia khác về JS nói chung ( Em sợ bị quê ).

    Viết theo yêu cầu của huongpro_love ( đại khái vậy).

     

    Notepad ++ và XAMPP được khuyến nghị. Ai thích dùng Word 2016 và IIS cũng không sao.

     

    01/ Thư viện cần thiết:

    + jQuery tối thiểu 2.0 (dùng jQuery của NukeViet cũng ngon).

    + Plugin jQuery Cookie.

    => Link: https://github.com/carhartl/jquery-cookie

    02/ Tiến hành:

    + Đầu tiên, hãy khởi tạo 1 file tên tuỳ ý, lưu dưới dạng .HTML hoặc .PHP.

    Mình sẽ tạo file tên cookie.php, đặt vào thư mục htdocs của XAMPP.

    Lý do vì sao như vậy thì tại vì mình thích.

     

    + Nội dung tham khảo của file này:

    <!DOCTYPE html>
    <html lang="vi" xmlns="http://www.w3.org/1999/xhtml" prefix="og: http://ogp.me/ns#">
    <head>
    <script src="https://nuke.vn/assets/js/jquery/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    
    <title>Cookie test</title>
    </head>
    <body>
    Alert some cookie ...
    </body>
    </html>

     

    Nó sẽ trông như thế này, chả có tác dụng gì 1 dòng text vô nghĩa, ah, có chút ý nghĩa ...

     

     Diễn giải thêm:

    + Chúng ta đã nhúng jQuery từ link ngoài ( mà ở đây là từ nuke.vn).

    + Thư viện jQuery cookie bắt buộc phải gọi phía sau jQuery, thông qua CDN bên trên mình đã gắn code.

     

    -------

    Giờ chúng ta sẽ thêm một chút code để kiểm tra xem cookie làm ăn như thế nào.

    Mình thêm đoạn code bên dưới vào thẻ head, tất nhiên phải nằm dưới 2 thư viện kia.

    <script>
    var check_cookie = $.cookie('just_a_test');
    alert(check_cookie);
    </script>

    + Diễn giải: Chúng ta tạo 1 biến tên là check_cookie, với giá trị là lấy cookie có tên là just_a_test.

    Sau đó, sẽ xuất ra thông báo cảnh báo trên màn hình. Nếu làm đúng, sau khi F5, ta thu được kết quả như sau:

     

     

    Bảng cảnh báo trả về undefined.

    Lý do, vì chúng ta chưa set một cookie nào có tên như thế, nên tất nhiên sẽ là "chưa định nghĩa".

    Điểm đáng mừng đó là, chúng ta đã nhúng và test thành công jQuery cookie.

    ----------

    Tiếp đó, chúng ta sẽ khởi tạo 1 cookie với tên và giá trị tuỳ ý.

    Cookie bản thân nó có thời hạn nhất định; chúng ta có thể tuỳ chỉnh thông qua câu lệnh mà plugin đã cung cấp. Ngược lại nếu không định nghĩa, cookie này sẽ là theo phiên, tức là hết hạn sau khi tắt hoàn toàn trình duyệt.

    $.cookie('name', 'value', { expires: 7, path: '/' });

     

    + Diễn giải:

    Cookie có tên là name, có giá trị là value, sẽ hết hạn sau 7 ngày, lưu tại đường dẫn /.

    Hai giá trị về thời hạn của cookie và nơi lưu, chúng ta sẽ bàn sau.

    Bài này sẽ bỏ qua path của cookie.

     

    Mình sẽ sửa đoạn code test cookie bên trên thành như sau để khởi tạo cookie.

    var check_cookie = $.cookie('just_a_test');
    alert(check_cookie);
    
    if( !check_cookie){
    	$.cookie('just_a_test', '03/08/2016', { expires: 1 });
    }
    

    + Diễn giải:

    Xuất thông báo cho cookie có tên just_a_test.

    Nếu biến check_cookie là rỗng, khởi tạo nó với nội dung 03/08/2016, thời hạn 1 ngày.

    Khi đó, F5 lần thứ nhất, chúng ta vẫn nhận được thông báo undefined.

     

     

    Và khi F5 phát nữa:

     

    => Thành cmn công !

    + Diễn giải:

    Kiểm tra biến check_cookie, nếu rỗng thì set giá trị và nội dung như code bên trên.

     

    ------

    Cơ bản, chúng ta đã tạo và chạy 1 cookie thành công.

    Nếu mở rộng ra, chúng ta có thể set cookie phức tạp hơn nhằm nhiều mục đích khác nhau.

    Các yếu tố như domain chạy cookie(domain), nơi lưu(path), thời hạn (expires)... có thể được cấu hình phức tạp hơn  để phục vụ các mục đích của bản thân, ví dụ: chạy quảng cáo theo thời hạn.

     

    Chúc các bạn vui và bị nhiều popup ...

    Xin hãy thảo luận mở rộng bên dưới để cùng học và trao đổi.

     

     
    Lần sửa cuối bởi bạn: 02/08/2016 23:18
    huongpro_love anpy.ceo thích điều này.
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    Em viết thế này mà sao n không tắt popup nhỷ :3
     

    $(document).ready(function($) {
    				if (!$.cookie("popup-opened")== undefined) {
    				setTimeout(function() {
    					$('.dark-bg').fadeIn('300', function() {
    						$('.intro-bg').slideDown('400');
    						$.cookie("popup-opened", 1, { expires : 30 });
    					});
    				}, 1000);
    				}

    Diễn giải: 
    Kiểm tra xem có tồn tại cookie "popup-opened" hay không, nếu không tồn tại thì mở popup đồng thời tạo 1 cookie có tên "popup-opened". Nếu như tồn tại rồi thì sẽ bỏ qua không làm gì cả. Sao không được ta :((

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

    Đoạn này nó sai sai

    if (!$.cookie("popup-opened")== undefined)

    Sửa thành

    if (!$.cookie("popup-opened"))

    xem thử nó thế nào.

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    Em thử r a, mà cũng không được :3 

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

    Do code bên dưới cũng sai. Mình đang test ....

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    Full code của n đây a :3
     

    <div id="fanback" >
    		<div class="dark-bg fan-exit"></div>
    			<div class="row intro-bg">
    				<div class="col-md-24">
    					<div id="it-intro">
    						<div class="it-test-panel">
    							<i class="fa fa-times-circle closePopUp"></i><h3>Đăng ký học thử 3 ngày miễn phí</h3>
    							<p class="subheading">
    								Hoàn thành khai báo sau để tham gia lớp học thử miễn phí của trung tâm thể hình TOP FITNESS
    							</p>
    							<div class="col-md-12">
    								[DANGKY_POPUP]
    							</div>
    							<div class="col-md-12">
    								[QUANGCAO_POPUP]
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    	</div>
    		<script type="text/javascript">
    				$(document).ready(function($) {
    				if (!$.cookie("popup-opened")) {
    				setTimeout(function() {
    					$('.dark-bg').fadeIn('300', function() {
    						$('.intro-bg').slideDown('400');
    						$.cookie("popup-opened", 1, { expires : 30 });
    					});
    				}, 1000);
    				}
    			$('.closePopUp').click(function(event) {
    				$('.intro-bg').slideUp('300', function() {
    					$(this).remove();
    					$('.dark-bg').fadeOut('400', function() {
    						$(this).remove();
    					});
    				});
    			});
    		}); 
    	</script>

     

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

    var cookie_popup = $.cookie("popup-opened");
    $(document).ready(function() {
    	if (!cookie_popup) {
    		setTimeout(function() {
    			$('.dark-bg').fadeIn('300', function() {
    				$('.intro-bg').slideDown('400');
    			});
    		}, 1000);
    		$.cookie("popup-opened", '1', { expires : 30 });
    	}
    }
    

    Thử lại và báo cáo kết quả ...

    // Hên xui nha

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    Xui a ạ. popup của em n không hiện luôn r. Hix

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

    Trước đó popup có chạy ko ấy ?

    Chứ mình test đoạn kiểm tra cookie ko vấn đề.

    					setTimeout(function() {
    						$('.dark-bg').fadeIn('300', function() {
    							$('.intro-bg').slideDown('400');
    						});
    					}, 1000);
    

     

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

    Ví dụ như script của bạn:

    $(document).ready(function($) {
    	if (!$.cookie("popup-opened")) {
    		setTimeout(function() {
    			$('.dark-bg').fadeIn('300', function() {
    				$('.intro-bg').slideDown('400');
    			});
    		}, 1000);
    		alert("Tao moi Cookie");
    		$.cookie("popup-opened", 1, { expires : 30 });
    	}else{
    		alert("Da co Cookie" + $.cookie("popup-opened"));
    	}
    	$('.closePopUp').click(function(event) {
    		$('.intro-bg').slideUp('300', function() {
    			$(this).remove();
    			$('.dark-bg').fadeOut('400', function() {
    				$(this).remove();
    			});
    		});
    	});
    }); 
    

    Nếu có cookie rồi nó sẽ alert khác mà chưa có thì nó set và alert khác...

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    Trước đó popup vẫn chạy mà a. E thấy n không sai mà sao lại không được nhỷ 

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

    Đây là code test của mình.

    <!DOCTYPE html>
    <html lang="vi" xmlns="http://www.w3.org/1999/xhtml" prefix="og: http://ogp.me/ns#">
    <head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://nuke.vn/assets/js/jquery/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    
    <script>
    $.removeCookie('popup-opened');
    </script>
    <title>Cookie test</title>
    </head>
    <body>
    Alert some cookie ...
    <div id="dialog" title="Basic dialog">
      <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div>
    <script type="text/javascript">
    $(document).ready(function($) {
    	if (!$.cookie("popup-opened")) {
    		$( function() {
    			$( "#dialog" ).dialog();
    		} );
    		$.cookie("popup-opened", 1, { expires : 1 });
    	}
    }); 
    </script>
    </body>
    
    </html>

    Bạn thử chạy, nó sẽ popup của jQuery bình thường.

    Sau đó xoá

    <script>
    $.removeCookie('popup-opened');
    </script>

    Khi đó nó sẽ chỉ hiện thị lần đầu và 1 ngày sau mới hiện lại.

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    	<script>
    	$.removeCookie('popup-opened');
    	</script>
    		<script type="text/javascript">
    	$(document).ready(function($) {
    		if (!$.cookie("popup-opened")) {
    			$( function() {
    				$( ".dark-bg" ).dialog();
    			} );
    			$.cookie("popup-opened", 1, { expires : 1 });
    		}
    	}); 
    Sao khoong dudwocj anh nhy.. Đoạn này vs đoạn e viết cũng không khác nhau mà a. Sao lại thêm removeCookie a?

     

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

    $.removeCookie('popup-opened');

     

    Nó sẽ xoá cookie mỗi khi vào. Mục đích là test thôi.

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    Để tối em test lại a nhé, giờ em đang không ngồi máy tính được lâu hix

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

     

    Vậy là bị trĩ thật rồi.

    //ANW, mình sẽ nghiên cứu một dạng hiển thị popup gần giống với cái bạn đang làm.

    Có gì sẽ cập nhật vào 1 bài riêng luôn. 

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    Em cảm ơn anh nhé, a cố gắng giúp em nhé, em thử của a mà vẫn không được hix.. 

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

    Đây là bài test của mình.

    <!DOCTYPE html>
    <html lang="vi" xmlns="http://www.w3.org/1999/xhtml" prefix="og: http://ogp.me/ns#">
    <head>
    <script src="https://nuke.vn/assets/js/jquery/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script>
    // $.removeCookie('visited');
    
    </script>
    <style>
    #overlay {
    	display:none;
        position: fixed;
    	top:0;
    	bottom:0;
    	left:0;
    	right:0;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index: 10000;
    }
    #overlay p{
    	margin-left: auto;
        margin-right: auto;
    	display: block;
    	width: 100%;
    	height: 100%;
    	background: transparent;
    	text-align: center;
    }
    .close{
        position: absolute;
        top: 220px;
        right: 250px;
        width: 40px;
        height: 40px;
        cursor: pointer;
        z-index: 8040;
    }
    </style>
    <title>Cookie test</title>
    </head>
    <body>
    Alert some cookie ...
    <div id="overlay">
    <h1>Sign up</h1>
    <p class="inside">
    	<a href="http://google.com" title="Khuyến mãi to đùng"><img alt="Khuyến mãi to đùng" src="http://phongvu.vn/gallery/avatar_upload/ads/storage/19615_galaxy_popupp.png"/></a>
    </p>
    <button class="close">X</button>
    
    </div>
    <script>
    $(document).ready(function() {
        var visited = $.cookie('visited');
        if (!visited) {
            $('#overlay').fadeIn(500, 'linear');     
    		$.cookie('visited', 'yes', { expires: 1, path: '/' });
        }
    
    	$('button').click(function () {
    		$('#overlay').fadeOut(200, "linear");
    	});
    
    });
    </script>
    </body>
    </html>

    Nói chung cũng vẫn đơn giản.

    Tận dụng cookie để load.

    Bạn kiểm tra thử xem thế nào nhé. Lưu ý là phải điều chỉnh CSS cho chính xác với loại ads mà bạn muốn.

     

    Ngoài ra nếu muốn lúc nào overlay cũng hiện thì bỏ comment của cái này đi nhé.

    // $.removeCookie('visited');

    Chúc may mắn.

     
    huongpro_love thích điều này.
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

    Nếu làm đúng thì khi vừa load trang nó sẽ như này

     

Chia sẻ trang này

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây