PHẦN CƠ BẢN
VÒNG LẶP
DATA TYPES
EVENTS
DOM
BOM
OBJECT
BỔ SUNG
THỰC HÀNH
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Cách dùng cookie trong Javascript

Trong bài này chúng ta sẽ học cách sử dụng cookie trong javascript, qua đó sẽ giúp bạn quản lý được dữ liệu mà trình duyệt đã lưu trữ trên trang web của bạn.

Cookie là một đối tượng không thể thiếu trong các trình duyệt. Để thao tác được với cookie thì chúng ta phải dựa vào Javascript, bởi trình duyệt chỉ cho phép ta sử dụng javascript để lập trình.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Kể từ khi HTML5 ra đời thì chúng ta có thêm hai đối tượng, đó là localStore và sessionStore, được nhận định là có thể thay thế cho cookie. Tuy nhiên, điều này chỉ đúng khi bạn muốn lưu trữ dữ của riêng bạn trên trình duyệt, bởi bản chất trình duyệt vẫn phải sử dụng cơ chế của cookie.

1. Cookie trong javascript 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ể, tất cả đều do bạn thiết lập. Tuy nhiên, mỗi domain chỉ có một dung lượng cookie tối đa, nên hãy lưu ý cho trường hợp cần lưu 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ông tin đó 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.

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

website=freetuts.net

Khi trình duyệt gửi thông tin lên server thì cookies sẽ được gửi kèm theo. Chính vì vậy, trong ngôn ngữ phía backend như 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 một cách dễ dàng thông qua đối tượng document.cookie.

Tạo Cookie

Như mình đã nói, cookie trên trình duyệt sẽ lưu ở 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ụ: Lưu trữ chuỗi cookie chứa thông tin website.

document.cookie = 'website=freetuts.net';

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

document.cookie = 'website=freetuts.net';
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, đặt trong cấu trúc của chuỗi cookie và ngăn cách bởi dấu hai chấm. Định dạng thời gian là UTC.

document.cookie="website=freetuts.net; 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 home - domain gốc của website.

document.cookie="website=freetuts.net; 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.

// Giá trị cũ
document.cookie = "domain=freetuts.net";

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

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 expires7/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 cặp 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, chúng ta phải viết hàm tạo và lấy cookie để sau này sử dụng tiện lợi hơ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. Một số lưu ý khi sử dụng cookie trong javascript

Javascript được chạy và biên dịch tại client, nên nó không có tính bảo mật cao.

Khi bạn lưu dữ liệu vào cookie thì dữ liệu sẽ được lưu trên chính máy tính của khách. Vì vậy, bạn không nên lưu những dữ liệu mang tính bảo mật như mật khẩu, số thẻ ngân hàng ... mà chỉ lưu những thông tin cơ bản.

Mỗi domain chỉ được lưu một dung lượng vào cookie có giới hạn. Vì vậy, bạn không nên lưu những dữ liệu quá lớn, điều này sẽ không đảm bảo tính toàn vẹ của dữ liệu.

5. 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. Đó chính là nhược điểm duy nhất của cookie. Vì vậy, tốt nhất bạn nên sử dụng hai hàm setCookie và getCookie mà mình đã cung cấp ở trên.

Cùng chuyên mục:

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top