Cookie 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áy chủ web gửi một trang web tới trình duyệt, kết nối sẽ bị tắt và máy chủ sẽ quên mọi thứ về người dùng.
Cookie được phát minh để giải quyết vấn đề “làm thế nào để ghi nhớ thông tin về người dùng”:
- Khi người dùng truy cập một 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, cookie sẽ "ghi nhớ" tên của người đó.
Cookie được lưu theo cặp tên-giá trị như:
username = John Doe
Khi trình duyệt yêu cầu một 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ẽ lấy đượ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 hỗ trợ cookie cục bộ.
Tạo Cookie bằng JavaScript
JavaScript có thể tạo, đọc và xóa cookie bằng thuộc tính document.cookie .
Với JavaScript, cookie có thể được tạo như thế này:
document.cookie = "username=John Doe";Bạn cũng có thể thêm ngày hết hạn (theo giờ UTC). Theo mặc định, cookie sẽ bị xóa khi đóng trình duyệt:
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 cookie thuộc về đường dẫn nào. 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 bằng JavaScript
Với JavaScript, cookie có thể được đọc như thế này:
let x = document.cookie; document.cookie sẽ trả về tất cả cookie trong một chuỗi giống như: cookie1=value; cookie2=giá trị; cookie3=giá trị;
Thay đổi cookie bằng JavaScript
Với JavaScript, bạn có thể thay đổi cookie giống như cách bạn tạo cookie:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Cookie cũ bị ghi đè.
Xóa Cookie bằng 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 đặt tham số hết hạn thành ngày trong quá khứ:
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 đúng cookie.
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. Nhưng nó không phải như vậy.
Ngay cả khi bạn viết toàn bộ chuỗi cookie vào document.cookie, khi đọc lại, bạn chỉ có thể thấy cặp tên-giá trị của nó.
Nếu bạn đặt cookie mới, các 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 lại document.cookie, bạn sẽ nhận được thông tin như sau:
cookie1 = giá trị; cookie2 = giá trị;
Nếu bạn muốn tìm giá trị của một cookie được chỉ định, bạn phải viết hàm JavaScript tìm kiếm giá trị cookie trong chuỗi cookie.
Ví dụ về cookie JavaScript
Trong ví dụ sau, chúng tôi sẽ tạo một cookie lưu trữ tên của khách truy cập.
Lần đầu tiên khách truy cập vào trang web sẽ được yêu cầu điền tên của mình. Tên sau đó được lưu trữ trong một cookie.
Lần tiếp theo khách truy cập đến cùng một trang, họ sẽ nhận được tin nhắn chào mừng.
Ví dụ chúng ta sẽ tạo 3 hàm JavaScript:
- Chức năng đặt giá trị cookie
- Một hàm để lấy giá trị cookie
- Một chức năng để kiểm tra giá trị cookie
Chức năng đặt cookie
Đầu tiên, chúng ta tạo một function lưu trữ tên của khách truy cập vào biến cookie:
Ví dụ
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Ví dụ giải thích:
Các tham 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 (exdays).
Hàm đặt cookie bằng cách thêm tên cookie, giá trị cookie và chuỗi hết hạn.
Chức năng nhận cookie
Sau đó, chúng ta tạo một function trả về giá trị của một cookie đã chỉ định:
Ví dụ
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Chức năng giải thích:
Lấy tên cookie làm tham số (cname).
Tạo một biến (tên) có văn bản cần tìm kiếm (cname + "=").
Giải mã chuỗi cookie, để xử lý cookie có ký tự đặc biệt, ví dụ: '$'
Tách 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 từng giá trị c = ca[i]).
Nếu tìm thấy cookie (c.indexOf(name) == 0), hãy trả về giá trị của cookie (c.substring(name.length, c.length).
Nếu không tìm thấy cookie, hãy trả về "".
Chức năng kiểm tra cookie
Cuối cùng, chúng ta tạo hàm kiểm tra xem cookie có được đặt hay không.
Nếu cookie được đặt, nó sẽ hiển thị lời chào.
Nếu cookie không được đặt, nó sẽ hiển thị hộp nhắc nhở, hỏi 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 :
Ví dụ
function checkCookie() {
let
username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != ""
&& username != null) {
setCookie("username", username, 365);
}
}
}
Tất cả cùng nhau bây giờ
Ví dụ
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let ca
= document.cookie.split(';');
for(let i = 0; i < ca.length; i++)
{
let 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() {
let user = getCookie("username");
if (user != "")
{
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" &&
user != null) {
setCookie("username", user, 365);
}
}
} Hãy tự mình thử » Ví dụ trên chạy hàm checkCookie() khi tải trang.
