Quản lí cookie bằng jQuery
---o0o---
Mình quên mất link bài viết gốc rồi ;(
Mục đích của việc quản lí cookie bằng jQuery là từ một task khách hàng yêu cầu trong việc xử lí Subscrible text box
Mô tả task:
Thành phần tác động tới: Text [Subscrible] và Textbox [Subscrible], Button [X] tương đương với close
- Lần đầu tiên vào site: Text có màu hồng, Textbox show ra. Khi F5 hay sang trang khác Text vẫn hồng,
chỉ khi ấn vào Button làm Textbox ẩn thì chữ mới màu đen. Sau đó chữ luôn là màu đen. Giống như các thẻ <a> khác
- Nếu click vào Button [X] thì Textbox ẩn, Text có màu đen. Khi F5 hay sang trang khác Textbox vẫn ẩn
- Nếu click vào Text thì Textbox lại hiện ra. Khi F5 hay sang trang khác Textbox vẫn hiện
- Nếu đã sign up thì Textbox ẩn. Khi F5 hay sang trang khác Textbox vẫn ẩn (Phần này sẽ nhắc tới sau do liện quan tới ajax subscrible)
Để giải quyết 3 gạch đầu dòng đầu tiên, mình sử dụng 2 cookie là [hide] và [show] để quản lí trạng thái của Textbox
Lần đầu tiên vào site: Text có màu hồng, Textbox show ra => cả 2 cookie chưa tồn tại
Nếu click vào Button [X] thì Textbox ẩn => tạo cookie hide. Nếu tồn tại cookie show thì xóa nó đi
Nếu click vào Text thì Textbox lại hiện ra => tạo cookie show. Nếu tồn tại cookie hide thì xóa nó đi
Ok. Trên đây là solution. Ta sẽ có đoạn code như sau
<script> //Khởi tạo cookie function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } //Đọc cookie function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } //hàm xóa cookie function eraseCookie(name) { createCookie(name,"",-1); } // Xử lí cookie $(document).ready(function () { var x = readCookie('hide'); var y = readCookie('show'); if(x == 1){ $('.form').hide(); //alert (x); } if(y == 1){ $('.form').show(); //alert (y); } $('.click-to-show').click(function(){ $('.form').show(); createCookie('show','1'); if(x){ eraseCookie('hide'); } }); $('.click-to-close').click(function(){ $('.form').hide(); createCookie('hide','1'); if(y){ eraseCookie('show'); } }); }); </script> //Cấu trúc html <a class="click-to-show">Subscrible</a>; <div class="form"> <input type="text"> <span class="click-to-close">X</span>; </div>
Note: Vì là jQuery nên nhớ gọi thư viện jQuery ;)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Kết quả thu được như sau
SubscribleViệc để text ban đầu có màu hồng, chỉ cần làm như sau
Tạo 1 class riêng là: textbox-first có style với color: pink. check nếu x < 1 && y < 1 thì addClass vào cho Text
Vì Text có thêm class textbox-first nên khi click vào Button cần check nếu có class textbox-first thì phải removeClass đó đi
<style>
.textbox-first{
color: #fd008a !important;
}
</style>
if(x < 1 && y < 1){
$('.click-to-show').addClass('textbox-first');
}
