jQuery - Quản lí cookie bằng jQuery

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

Subscrible

X

Việ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');
    }