Chủ đề nổi bật
03/08/2018, 10:00

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 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ì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.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan
Mới nhất

Image Map trong JavaScript

Bạn có thể sử dụng JavaScript để tạo Image map ở Client-Side. Các Image map được kích hoạt bởi thuộc tính usemap cho thẻ <img /> và được định nghĩa bởi các thẻ mở rộng đặc biệt <map> và <area>. Hình ảnh mà tạo bản đồ đó được chèn vào trong trang bởi sử dụng phần tử ...

Tài liệu tham khảo & Framework cho Javascript

Dưới đây chúng tôi liệt kê tất cả các nguồn tài liệu hữu ích và Framework cho JavaScript. Bạn nên sử dụng chúng để thực hành cũng như hiểu sâu hơn những chủ đề đã được đề cập trong loạt bài này. Các JavaScript Framework hàng đầu: Follow fanpage của ...

Xử lý lỗi trong JavaScript

Có 3 kiểu lỗi trong chương trình: (a) lỗi cú pháp (Syntax Error), (b) lỗi trong khi chạy chương trình (Runtime Error), và (c) lỗi về tính logic của cấu trúc chương trình (Logical Error). Syntax Error Lỗi cú pháp (Syntax Error), cũng được gọi là parsing error, xảy ra tại thời gian biên dịch ...

Đa phương tiện (Multimedia) trong JavaScript

Đối tượng navigator trong JavaScript bao gồm một đối tượng con gọi là plugins . Đối tượng này là một mảng, với một cổng vào (entry) cho mỗi plug-in được cài đặt trên trình duyệt. Đối tượng navigator.plugins chỉ được hỗ trợ bởi Netscape, Firefox và Mozilla. Ví dụ Dưới đây là ví dụ minh ...

Các hàm có sẵn trong JavaScript

Đối tượng Number chỉ chứa các phương thức mặc định mà là một phần của sự định nghĩa của mỗi đối tượng. Phương thức Miêu tả constructor() Trả về hàm mà tạo sự instance của đối tượng này. Theo mặc định, nó là đối tượng Number. toExponential() Làm một số hiển thị ở dạng số mũ, ...

Debug trong JavaScript

Trong khi mã hóa chương trình, các nhà lập trình có thể tạo ra các lỗi. Một lỗi trong một chương trình hoặc một script được xem như là một bug . Tiến trình tìm kiếm và sửa các bug được gọi là dubugging và là một phần bình thường của tiến trình lập trình. Chương này giới thiệu một số công ...

Document Object Model (DOM) trong JavaScript

Mỗi trang web cư ngụ bên trong một cửa sổ trình duyệt mà có thể xem như là một đối tượng. Một đối tượng Document biểu diễn tài liệu HTML được hiển thị trong cửa sổ đó. Đối tượng Document có nhiều thuộc tính đa dạng như các đối tượng khác mà cho phép truy cập và chỉnh sửa nội dung tài liệu. ...

Đối tượng Boolean trong JavaScript

Miêu tả Đối tượng Boolean biểu diễn hai giá trị, hoặc "true" hoặc "false". Nếu tham số value bị bỏ qua hoặc là 0, -0, null, false, NaN , undefined, hoặc một chuỗi trống (""), đối tượng có một giá trị khởi tạo là false. Cú pháp Sử dụng cú pháp sau để tạo một đối tượng Boolean . ...

Đối tượng String trong JavaScript

Đối tượng String giúp bạn làm việc với một dãy các ký tự; nó giúp xử lý các kiểu dữ liệu chuỗi gốc trong JavaScript với một số phương thức giúp đỡ. Khi JavaScript tự động biến đổi giữa chuỗi gốc và các đối tượng String, bạn có thể gọi bất kỳ phương thức giúp đỡ nào của đối tượng String ...

Điều hướng trang (Redirect) trong JavaScript

Điều hướng lại trang là gì? Bạn có thể gặp tình huống khi bạn click vào một URL để tới trang X nhưng bạn được điều hướng tới trang Y. Nó xảy ra là do Page Redirection – Điều hướng lại trang . Khái niệm này khác với: JavaScript – Refresh trang. Có nhiều lý do khác nhau để tại sao bạn muốn ...