JavaScript - Cookies | How to use cookies in JavaScript?

Cookies là một nơi để lưu trữ các biến, thông tin... khi bạn truy cập web tại máy tính bạn sử dụng để để truy cập website.

Đối với lập trình viên thì có thể hiểu Cookies là một nơi dùng để gắn các biến, thông số, thông tin... trên máy khách(client) khi họ truy cập vào trang web của mình và sau đó có thể tái sử dụng lại các thông số này khi họ tiếp tục truy cập lại website một lần nữa.

Cookie là gì?

Một cookie là một biến được lưu trữ trên máy tính của người truy cập. Nó sẽ được gọi lại để sử dụng trong lập trình với một số điều kiện chuẩn là biến được gán trên cùng một máy tính truy cập, cùng một trình duyệt. Với JavaScript, bạn có thể tạo và truy cập giá trị của cookie.

Ví dụ về các cookie:
Tên cookie - Lần đầu tiên một người truy cập đến trang web của bạn, họ phải điền vào / tên của ông bà. Tên này sau đó được lưu trữ trong một cookie. Tiếp theo thời gian khách truy cập đến trang web của bạn, họ có thể nhận được một thông điệp chào mừng như "Chào mừng John Doe!" và Tên được lấy từ các cookie lưu trữ.

Ngày cookie - Lần đầu tiên một người truy cập đến trang web của bạn, ngày hiện tại được lưu trữ trong một cookie. Tiếp theo thời gian khách truy cập đến trang web của bạn, họ có thể nhận được một thông báo như "Chuyến thăm lần cuối vào lúc Thứ Ba ngày 11 tháng 8 năm 2005!" và Ngày được lấy từ các cookie lưu trữ.

Bạn có thể thấy các cookie được lưu trữ trên trình duyệt FireFox bằng cách sau:

• Chọn Tools(trên thanh menu) → Option
• Trên cửa sổ option chọn Privacy →  Privacy

• Tiếp theo chọn dòng chữ "remove individual cookies."
• Trong cửa sổ Cookies như hình dưới bạn sẽ thấy được các Cookies của các website được lưu trữ trên máy của mình.

 Như hình trên bạn có thấy các Cookies của trang youtube.com được lưu trữ trên máy của tôi.

Tạo và lưu trữ Cookie bằng JavaScirpt.

Dùng đoạn javascript sau để tạo và lưu trữ cookies trên máy khách truy cập vào website của bạn:

function setCookie(c_name,value,exdays)
{
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
}

• c_name: Tên của Cookies bạn muốn lưu trên máy khách.
• value: Giá trị của Cookies bạn muốn lưu trữ trên máy khách.
• exdays: Số ngày Cookies này mất hiệu lực.(vd: Bạn chỉ muốn Cookies tồn tại trên máy khách trong 1 ngày thì điền vào số 1).

Lấy giá trị Cookies được lưu trên máy viếng thăm(client).

Sử dụng đoạn javascript sau để lấy giá trị cookie đã được lưu trữ trong máy viếng thăm(client):

function getCookie(c_name)
{
    var c_value = document.cookie;
    var c_start = c_value.indexOf(" " + c_name + "=");
    if (c_start == -1)
    {
        c_start = c_value.indexOf(c_name + "=");
    }
    if (c_start == -1)
    {
        c_value = null;
    }
    else
    {
        c_start = c_value.indexOf("=", c_start) + 1;
        var c_end = c_value.indexOf(";", c_start);
        if (c_end == -1)
        {
            c_end = c_value.length;
        }
        c_value = unescape(c_value.substring(c_start,c_end));
    }
    return c_value;
}

Bạn chỉ cần gọi và điền tên của Cookie trong hàm getCookie(my_cookie) là có thể lấy được giá trị Cookie được lưu trũ trên máy khách.

Kiểm tra giá trị của Cookie:

Để xác định máy khách là lần đầu tiên truy cập vào website của bạn hay là máy đã truy cập vào website trước đó rồi, bạn cần phải kiểm tra máy truy cập đã được gắn Cookie hay chưa? Nếu chưa thì bạn sẽ gắn Cookie cho nó? Nếu đã có tồn tại trên máy khách thì bạn có thể gọi hàm lấy Cookie được lưu trữ trên máy viếng thăm để thực hiện các thao tác xử lý.

Dưới đây là một đoạn JavaScript đơn giản để kiểm tra sự tồn tại của Cookie:

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

• Đầu tiên hàm sẽ lấy lấy giá trị Cookie có tên "username" cho vào biết username để kiểm tra.
• Trường hợp biến username có giá trị tồn tại(khác null và khác trống) thì bảng thông báo chào mừng bạn trở lại sẽ được hiển thị lên "Welcome again UserName".
• Trường hợp ngược lại thì một cửa sổ thông báo nhỏ sẽ hiện ra yêu cầu bạn điền Username của mình vào để thiết lập giá trị cho biến Cookie.

Một ví dụ đơn giản dùng Cookie bằng JavaScript.

<!DOCTYPE html>
<html>
<head>

<script>
function getCookie(c_name)
{
    var c_value = document.cookie;
    var c_start = c_value.indexOf(" " + c_name + "=");
    if (c_start == -1)
    {
        c_start = c_value.indexOf(c_name + "=");
    }
    if (c_start == -1)
    {
        c_value = null;
    }
    else
    {
        c_start = c_value.indexOf("=", c_start) + 1;
        var c_end = c_value.indexOf(";", c_start);
        if (c_end == -1)
        {
            c_end = c_value.length;
        }
        c_value = unescape(c_value.substring(c_start,c_end));
    }
    return c_value;
}

function setCookie(c_name,value,exdays)
{
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
}

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

</head>
<body onload="checkCookie()">
</body>
</html>

Write: +Bui Ngoc Son