Tạo change box với CSS3, jQuery, regExp và Cookies (phần 2)

SOURCE DEMO

Ở phần 1 của bài này tôi đã hướng dẫn các bạn sử dụng jquery và biểu thức điều kiện để kiểm tra xem mã màu nhập vào có đúng hay không
. Phần 2 tôi sẽ hướng dẫn các bạn sử dụng cookies để lưu giá trị này khi đã tắt trình duyệt, để khi lần 2 mở page lên thì background của trình duyệt sẽ chính là màu của mã hexcode đã nhập vào ở lần thứ nhất.

Trước khi bắt đầu, tôi muốn giới thiệu qua về khái niệm Cookies và cách sử dụng nó.

Cookies là gì?

Cookies có thể miêu tả đơn giản là một file text trong máy tính của bạn, nó được tạo ra và xử lý bằng mã javascript ngay trên trình duyệt của bạn giúp lưu một giá trị nào nó khi ta nhập vào trên trình duyệt vào file text hoặc lấy giá trị từ file text mà ta đã lưu trong lần trước đó hiển thị lên trình duyệt.

Ví dụ về một tiện ích phổ biến mà cookies mang lại là lưu trữ tên và thông tin người dùng khi ta đăng nhập vào trang web. Quá trình này đơn giản diễn ra như sau: Khi ta đăng nhập thành công lần đầu vào một trang web thì mã javascript bắt đầu hoạt động và tạo một file text lưu giá trị tên và mật khẩu cho trang web này để đến lần thứ 2 và các lần sau nữa khi ta vào lại trang web này thì trình duyệt sẽ tự động sử lý bằng mã javascript lấy giá trị từ file text đã lưu trong lần đầu và đăng nhập giúp ta.

Cookie hoạt động ra sao

Một file cookies chứa 3 giá trị sau:

Giá trị	Chức năng
Name-value	Tên cookies và giá trị của nó, ví dụ ta có cookies là tendangnhap-zlatan.
Expiry date	Ngày giới hạn, sau ngày này thì cookies sẽ tự xóa.
Domain & Path	Domain là tên trang web mà cookies đã tạo, còn path là đường dẫn chứa file text.

Cookies có thể đọc, viết và xóa bằng mã javascript thông qua lệnh document.cookie. Ví dụ ta có một cookie có ‘username = zlatan’ thì cấu trúc của nó là chuỗi sau:

document.cookie =

  'username=zlatan; expires=Thur, 10 Aug 2012 22:02:40 UTC; path=/'

Lưu giá trị hexcode đã nhập vào cookie

Ở phần 1 tôi đã hướng dẫn các bạn tạo một box sau đó nhập mã màu hexcode vào để thay đổi background-color của màn hình. Bây giờ tôi sẽ hướng dẫn các bạn sử dụng cookies lưu giá trị hexcode này để đến lần truy cập tiếp theo thì background-color của màn hình sẽ là màu mà ta đã nhập lần trước.

Bước 1: hàm tạo cookie

function createCookie(name,value,days){

    if(days){

        var date = new Date(); // lấy giá trị ngày hôm nay vào biến date

        date.setTime(date.getTime()+(days*24*60*60*1000)); // lấy giá trị ngày hết hạn cho biến date

        var expires = "; expires=" + date.toGMTString(); // convert giá trị này sang chuỗi giờ GMT

    }else{

        var expires = "";

    }

    document.cookie = name+"="+value+expires+"; path=/"; // tạo cookie cho name

}

Ta tạo hàm createCookie với 3 tham số :

name: tên cookie
value: giá trị cookie cho tên của nó
days: ngày hết hạn (ta muốn lưu giá trị này trong bao nhiêu ngày).

Trong hàm này đầu tiên ta convert thời gian sang dạng GMT, kiểm tra xem tham số days có xác định hay không sau đó tạo cookie name với giá trị value.

Bước 2: hàm đọc cookie

function readCookie(name){

    var nameEQ = name + "=";

    var ca = document.cookie.split(';'); // đưa tất cả cookie của domain vào mảng ca

    for(var i=0;i < ca.length; i++){ // kiểm tra lần lượt từng phần tử trong mảng

        var c = ca[i];

        while (c.charAt(0) == " ") c = c.substring(1,c.length); // xóa dấu cách trắng phía trước (nếu có)

        if(c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); //trả lại giá trị value của name

    }

    return null;

}

Giả sử ta có cookie với giá trị như sau:

'username=zlatan; expires=Thur, 10 Aug 2012 22:02:40 UTC; path=/'

'password=123456; expires=Thur, 10 Aug 2012 22:02:40 UTC; path=/'

Giờ đây ta muốn lấy giá trị zlatan của username thì ta sẽ gọi hàm readCookie(username), quá trình diễn ra như sau:

Gán biến nameEQ = ‘username=’;
Bản chất cookie ở trên là chuỗi sau ‘username=zlatan; pass=123456′ ta đưa chuỗi này vào mảng ca với method .split(), ta sẽ có ca[0] = ‘username=zlatan’ và ca[1] = ‘pass=123456′ .
Sau đó so sánh biến nameEQ và các phần tử trong mảng ca với method .indexOf() . Nếu thỏa mãn điều kiện (ở đây ca[0] sẽ thỏa mãn) thì trả lại giá trị value bằng cách cắt chuỗi ca[0] từ vị trí chiều dài của nameEQ đến hết bằng chuỗi method .subString().

Bây giờ ta sẽ áp dụng 2 hàm trên để lưu giá trị hex code ở phần 1.

$('.change').click(function(){

    code = $('.box').val();

    if(code.length == 6){

        patt = /[A-Fa-f0-9]{6}/g;

        t = patt.test(code);

        if(t){

            $('body').css({'background-color':'#'+code});

            createCookie('hexcode',code,'1'); // tạo cookie hexcode = code

        }else{

            $('#word').addClass('show');

        }

    }else{

        $('#count').addClass('show');

    }

});

Nếu thỏa mãn đầy đủ điều kiện tạo cookie bằng cách gọi hàm createCookie(‘hexcode’,code,’1′), cookie có giá trị trong 1 ngày kể từ lúc tạo. Sau đó gọi cookie cho lần load sau:

$(window).ready(function(){

    h = readCookie('hexcode');

    if(h){

        $('body').css({'background-color':'#'+h});

        $('.box').val(h);

    }

})

Gán biến h bằng giá trị cookie của hexcode với hàm readCookie(‘hexcode’), nếu h xác định thì set background-color của màn hình và giá trị của box bằng h.

Tạo change box với CSS3, jQuery, regExp và Cookies (phần 1).

Nguồn: In4mau.blogspot.com