BOM - Cookie trong Javascript

Cookie là một đối tượng không thể thiếu trong các trình duyệt vì hầu hết các website đều có sử dụng cookie để lưu trữ dữ liệu. Việc thao tác với cookie chúng ta phải dựa vào Javascript nên trong bài này chúng ta sẽ tìm hiểu tới Cookie là gì và cách sử dụng cookie trong Javascript như thế nào để ứng dụng cho các bài sau.

1. Cookie là gì?

Cookie là dữ liệu được lưu trữ trong một file text và nằm trong máy tính nên việc lưu trữ Cookie sẽ là vĩnh viễn hoặc là một thời gian cụ thể do bạn thiết lập. Tuy nhiên mỗi domain sẽ có một dung lượng Cookie tối đa có thể lưu trữ được nên hãy lưu ý trường hợp dữ liệu quá lớn.

Để hiểu rõ hơn cookie là gì và tại sao lại sử dụng Cookie thì mình đặt một trường hợp thế này: Giả sử bạn muốn lưu trữ một thông tin nào đó tại mỗi client (Browser) và các lần truy cập tiếp theo (ngày mai, ngày một, một ngày nào đó, ..) có thể sử dụng được thì phải làm thế nào? nếu sử dụng Session trong PHP thì chỉ lưu trữ được một khoảng thời gian nhất định. Vậy giải pháp là ta sẽ sử dụng Cookie để lưu trữ thông tin đó.

Cookie được lưu trữ ở dạng name=value, ví dụ:

website=code24h.com

Khi trình duyệt gửi thông tin lên Server thì cookies sẽ được load và gửi kèm theo trong request, chính vì vậy trong ngôn ngữ server (PHP, JSP, ..) cũng sẽ nhận được thông tin đó. Đây cũng là thông tin để trả lời cho câu hỏi tạo sao Cookie được lưu trữ ở Client mà trên Server vẫn đọc được, và ta cũng hay sử dụng Cookie để xây dựng chức năng Remember Me khi Login.

2. Các thao tác với Cookie trong Javascript

Javascript có thể đọc, thêm và xóa Cookie thông qua đối tượng BOM document.cookie.

Tạo Cookie

Ở phần Cookie là gì bạn đã biết Cookie được lưu trữ ở dạng name=value nên để tạo Cookie thì ta sử dụng chuỗi dữ liệu giống như vậy.

Ví dụ:

document.cookie = 'website=code24h.com';

Trường hợp bạn muốn lưu trữ nhiều Cookie thì chỉ việc tạo hai lần.

Ví dụ:

document.cookie = 'website=code24h.com';
document.cookie = 'email=thehalfheart@gmail.com';

Để thiết lập thời gian sống cho Cookie thì ta sử dụng từ khóa expires cấu trúc của chuỗi này là thời gian ở dạng UTC.

Ví dụ:

document.cookie="website=code24h.com; expires=Thu, 0 Dec 2015 12:00:00 UTC";

Theo mặc định thì khi bạn ở trang nào thì Cookie sẽ lưu với đường dẫn trang đó. Tuy nhiên nếu bạn muốn thay đổi đường dẫn thì sử dụng từ khóa path.

Ví dụ: Path là trang chủ

document.cookie="website=code24h.com; expires=Thu, 0 Dec 2015 12:00:00 UTC;path=";

Lấy giá trị Cookie

Để lấy danh sách các Cookie thì ta sử dụng cú pháp như sau:

var giatri = document.cookie;

Lúc này kết quả sẽ trả về một chuỗi Cookie có cấu trúc name=value, trường hợp bạn lưu nhiều Cookie thì nó sẽ có dạng name1=value1;name2=value2.

Đổi giá trị cho Cookie

Để thay đổi giá trị cho Cookie thì bạn chỉ việc gán lại giá trị cho cookie.

Ví dụ:

// Giá trị cũ
document.cookie = "domain=code24h.com";

// Đổi sang giá trị mới
document.cookie = "domain=code24h.com";

Xóa Cookie

Trong Javascript không có hàm xóa Cookie mà bạn phải sử dụng từ khóa expires để thiết lập thời gian sống cho Cookie là khoảng thời gian đã qua. Ví dụ hôm nay là ngày 8/11/2015 thì bạn chỉ việc gán expires là 7/8/2015 là đã xóa được Cookie đó.

3. Viết hàm xử lý Cookie trong Javascript

Vì Cookie được lưu trữ ở dạng chuỗi các key=value và các chuỗi giá trị cách nhau bởi dấu chấm phẩy ; nên để lấy một giá nào đó bạn phải xử lý chuỗi rất phức tạp, vì vậy thông thường chúng ta viết hàm tạo và lấy Cookie để sử dụng được nhiều lần.

Sau đây là hai hàm mình lấy ở W3C các bạn tham khảo.

// Hàm thiết lập Cookie
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

// Hàm lấy Cookie
function getCookie(cname) {
    var name = cname + "=";
    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);
        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
}

Bạn chỉ việc truyền các tham số vào hàm là đã tạo và lấy được Cookie.

4. Lời kết

Việc sử dụng Cookie trong Javascript rất thường xuyên, tuy nhiên để gán và lấy giá trị Cookie thì bạn phải thông qua các giai đoạn tách chuỗi và gán chuỗi rất phức tạp. Vì vậy để tiện lợi bạn hãy viết ra những hàm riêng như phần 3 mình đã trình bày.

Ngoài ra bạn có thể sử dụng các thư viện Cookie ở bên ngoài bằng cách sử dụng Google để tìm kiếm.

Nguồn: code24h.com