Tìm hiểu Cookies trong JavaScript

Cookie cho phép bạn lưu trữ thông tin người dùng trong các trang web.

Cookie là gì?

Cookie là dữ liệu, được lưu trữ trong các tệp văn bản nhỏ, trên máy tính của bạn. Khi một máy chủ gửi trang web tới một trình duyệt, kết nối sẽ bị tắt và máy chủ sẽ không lưu lại thông tin về người dùng.

Cookie được sinh ra để giải quyết vấn đề “làm thế nào để nhớ thông tin về người sử dụng”:

• Khi vào trang web, tên của người dùng có thể được lưu trữ trong một cookie.
• Lần tiếp theo ghé thăm trang, cookie “nhớ” tên của người dùng.

Cookie được lưu trong các cặp giá trị tên như:

username = John Doe

Khi trình duyệt yêu cầu trang web từ máy chủ, các cookie thuộc trang sẽ được thêm vào yêu cầu. Bằng cách này máy chủ sẽ nhận được dữ liệu cần thiết để “ghi nhớ” thông tin về người dùng.

Không có ví dụ nào dưới đây sẽ hoạt động nếu trình duyệt của bạn đã tắt cookie.

Tạo Cookie với JavaScript

JavaScript có thể tạo, đọc và xóa cookie với thuộc tính document.cookie.

document.cookie = “username=John Doe”;

Bạn cũng có thể thêm một ngày hết hạn (theo giờ UTC) lưu cookie. Theo mặc định, cookie sẽ bị xóa khi trình duyệt đóng lại:

document.cookie = “username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC”;

Với tham số đường dẫn, bạn có thể cho trình duyệt biết đường dẫn của cookie. Theo mặc định, cookie thuộc về trang hiện tại.

document.cookie = “username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/”;

Đọc cookie với JavaScript

Với JavaScript, các cookie có thể được đọc như sau:

var x = document.cookie;

document.cookie sẽ trả về tất cả các cookie trong một chuỗi giống như: cookie1 = value; Cookie2 = giá trị; Cookie3 = giá trị;

Thay đổi cookie với JavaScript

Với JavaScript, bạn có thể thay đổi cookie giống như cách bạn tạo nó:

document.cookie = “username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/”;

Cookie cũ bị ghi đè lên.

Xóa cookie với JavaScript

Xóa cookie rất đơn giản. Bạn không phải chỉ định giá trị cookie khi xóa cookie, chỉ cần thiết lập tham số hết hạn cho một ngày đã qua:

document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;”;

Bạn nên xác định đường dẫn cookie để đảm bảo rằng bạn xóa cookie một cách chính xác. Một số trình duyệt sẽ không cho phép bạn xóa cookie nếu bạn không chỉ định đường dẫn.

Chuỗi Cookie

Thuộc tính document.cookie trông giống như một chuỗi văn bản bình thường. Ngay cả khi bạn viết toàn bộ chuỗi cookie lên document.cookie, khi bạn đọc lại nó, bạn chỉ có thể nhìn thấy cặp giá trị tên của nó.

Nếu bạn đặt một cookie mới, cookie cũ hơn sẽ không bị ghi đè. Cookie mới được thêm vào document.cookie, vì vậy nếu bạn đọc document.cookie một lần nữa bạn sẽ nhận được một cái gì đó như: cookie1 = value; cookie2 = value;

Nếu bạn muốn tìm giá trị của một cookie được chỉ định, bạn phải viết một hàm JavaScript tìm kiếm giá trị cookie trong chuỗi cookie.

Ví dụ về Cookie JavaScript

Lần đầu tiên một người truy cập đến trang web, người đó sẽ được yêu cầu điền vào tên của mình. Tên này sau đó được lưu trữ trong một cookie. Lần tiếp theo khi khách truy cập đến cùng một trang sẽ nhận được một thông điệp chào mừng.

Ví dụ chúng ta sẽ tạo ra 3 hàm JavaScript:

• Một hàm để đặt một giá trị cookie
• Một hàm để nhận giá trị cookie
• Một hàm để kiểm tra giá trị cookie

Hàm đặt cookie

Đầu tiên, chúng ta tạo ra một hàm lưu trữ tên của khách truy cập trong một biến 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 + ";path=/";
}

Giải thích ví dụ: các thông số của hàm ở trên là tên của cookie (cname), giá trị của cookie (cvalue), và số ngày cho đến khi cookie hết hạn (hiện tại). Hàm đặt một cookie bằng cách thêm các cookie nấu ăn, giá trị cookie, và chuỗi hết hạn.

Hàm nhận cookie

Tạo một hàm trả về giá trị của một cookie đã chỉ định:

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.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 "";
}

Giải thích hàm: lấy cookiename làm tham số (cname). Tạo một biến (tên) với văn bản để tìm kiếm (cname + “=”). Giải mã chuỗi cookie, để xử lý cookie với các ký tự đặc biệt, ví dụ: ‘$’. Split document.cookie trên dấu chấm phẩy thành một mảng gọi là ca (ca = decodedCookie.split (‘;’)). Lặp qua mảng ca (i = 0, i <ca.length, i ++), và đọc ra mỗi giá trị c = ca [i].

Nếu cookie được tìm thấy (c.indexOf (name) == 0), trả lại giá trị của cookie (c.substring (name.length, c.length). Nếu không tìm thấy cookie thì trả về “”.

Một số hàm kiểm tra cookie

Tạo ra các hàm để kiểm tra nếu một cookie được thiết lập. Nếu cookie được đặt, nó sẽ hiển thị một lời chào. Nếu cookie không được đặt, nó sẽ hiển thị hộp nhắc, yêu cầu tên người dùng và lưu trữ cookie tên người dùng trong 365 ngày, bằng cách gọi hàm setCookie:

function checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("Welcome again " + username);
    } else {
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

Ví dụ dưới đây chạy hàm checkCookie () khi tải trang:

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 + ";path=/";
}

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 "";
}

function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}