JavaScript Cookies

Cookie cho phép bạn lưu trữ thông tin người dùng trong 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áy chủ web gửi trang web đến trình duyệt và kết nối được đóng, máy chủ sẽ quên mọi thông tin của người dùng.

Cookie được phát minh ra để giải quyết vấn đề "làm thế nào để ghi nhớ thông tin người dùng".

  • Khi người dùng truy cập trang web, tên của họ có thể được lưu trữ trong cookie.
  • Lần tiếp theo người dùng truy cập trang này, cookie sẽ "ghi nhớ" tên của họ.

Cookie được lưu trữ trong các cặp tên giá trị, chẳng hạn như:

username = Bill Gates

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

Nếu trình duyệt đã tắt hỗ trợ cookie cục bộ, các ví dụ sau sẽ không hoạt động.

Tạo cookie bằng JavaScript

JavaScript có thể sử dụng document.cookie Tính năng tạo, đọc, xóa cookie.

Bằng cách sử dụng JavaScript, bạn có thể tạo cookie như sau:

document.cookie = "username=Bill Gates";

Bạn có thể thêm ngày hiệu lực (thời gian UTC). Mặc định, cookie sẽ bị xóa khi trình duyệt đóng:

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";

Bằng cách path Tham số, bạn có thể thông báo cho trình duyệt rằng cookie thuộc đường dẫn nào. Mặc định, cookie thuộc trang hiện tại.

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

Đọc cookie bằng JavaScript

Bằng cách sử dụng JavaScript, bạn có thể đọc cookie như sau:

var x = document.cookie;

document.cookie Sẽ trả về tất cả các cookie trong một chuỗi, ví dụ: cookie1=value; cookie2=value; cookie3=value;

Thay đổi cookie bằng JavaScript

Bằng cách sử dụng JavaScript, bạn có thể thay đổi cookie như bạn đã tạo cookie:

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

Cookie cũ bị thay thế.

Xóa cookie bằng JavaScript

Việc xóa cookie rất đơn giản.

Khi xóa cookie, bạn không cần phải chỉ định giá trị cookie:

Chỉ cần gỡ bỏ expires Chỉ cần thiết lập tham số thành ngày đã qua là được:

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

Bạn nên định nghĩa đường dẫn cookie để đảm bảo xóa đúng cookie.

Nếu bạn không chỉ định đường dẫn, một số trình duyệt sẽ không cho phép bạn xóa cookie.

Chuỗi cookie

document.cookie Thuộc tính trông giống như một chuỗi văn bản bình thường. Nhưng nó không phải vậy.

Dù bạn gửi document.cookie Viết một chuỗi cookie hoàn chỉnh, khi đọc lại bạn chỉ thấy đối tượng tên-giá trị của nó.

Nếu đã thiết lập cookie mới, cookie cũ sẽ không bị thay thế. Cookie mới sẽ được thêm vào document.cookie, vì vậy nếu bạn đọc document.cookie, bạn sẽ nhận được điều này:

cookie1 = value; cookie2 = value;
　 　 　

Nếu bạn muốn tìm giá trị của cookie cụ thể, bạn phải viết hàm JavaScript để tìm giá trị cookie trong chuỗi cookie.

Ví dụ thực hành JavaScript Cookie

Trong ví dụ sau, chúng ta sẽ tạo một cookie để lưu tên của người truy cập.

Khi khách truy cập lần đầu tiên đến trang web, họ sẽ được yêu cầu điền tên. Sau đó, tên đó sẽ được lưu trong cookie.

Lần tới khi khách truy cập đến trang cùng một trang, họ sẽ nhận được một thông báo chào mừng.

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

  1. Hàm thiết lập giá trị cookie
  2. Hàm lấy giá trị cookie
  3. Hàm kiểm tra giá trị cookie

Hàm thiết lập cookie

Trước hết, chúng ta tạo một hàm để lưu tên của người truy cập trong biến cookie:

thực thể

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ụ:

Tham số của hàm này là: tên cookie (cname), giá trị cookie (cvalue) và số ngày biết trước cookie sẽ hết hạn (exdays).

Hàm này thiết lập cookie bằng cách cộng thêm tên cookie, giá trị cookie và chuỗi hết hạn.

Hàm lấy cookie

Sau đó, chúng ta tạo một hàm trả về giá trị cookie cụ thể:

thực thể

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:

Đặt cookie làm tham số (cname).

Tạo biến (name) và văn bản cần tìm kiếm (CNAME”=”).

Giải mã chuỗi cookie, xử lý cookie chứa ký tự đặc biệt, ví dụ như “$”.

sử dụng dấu chấm phẩy để tách document.cookie thành mảng có tên ca (decodedCookie.split(';')).

duyệt qua mảng ca (i = 0; i < ca.length; i++), sau đó đọc từng giá trị c = ca[i].

nếu tìm thấy cookie (c.indexOf(name) == 0), sẽ trả về giá trị của cookie (c.substring(name.length, c.length)).

nếu không tìm thấy cookie, sẽ trả về "".

hàm kiểm tra cookie

Cuối cùng, chúng ta tạo ra hàm kiểm tra cookie có được thiết lập hay không.

nếu đã thiết lập cookie, sẽ hiển thị một lời chào chào mừng.

nếu chưa thiết lập cookie, sẽ hiển thị một hộp thoại提示, hỏi tên người dùng, và lưu tên cookie 365 ngày, bằng cách gọi setCookie hàm:

thực thể

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

bây giờ kết hợp lại

thực thể

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("Chào lại " + user);
    }
        user = prompt("Vui lòng nhập tên của bạn:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

Thử ngay

Ví dụ trên sẽ chạy hàm checkCookie() sau khi trang được tải.