Cookie JavaScript
Cookie cho phép bạn lưu trữ thông tin người dùng trong các trang web.
Cookies 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 đến trình duyệt, kết nối sẽ bị ngắ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 trong cookie.
- Lần tới khi người dùng truy cập trang, cookie sẽ "ghi nhớ" tên của họ.
Cookie được lưu trong các cặp tên-giá trị như:
username = John Doe
Khi một trình duyệt yêu cầu một trang web từ một máy chủ, các cookie của trang đó sẽ được thêm vào yêu cầu. Bằng cách này, máy chủ 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 hỗ trợ cookie cục bộ.
Tạo Cookie bằng JavaScript
JavaScript có thể tạo, đọc và xóa cookie với thuộc document.cookie
tính.
Với JavaScript, một cookie có thể được tạo như sau:
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 trình duyệt bị đóng:
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 với JavaScript
Với JavaScript, cookie có thể được đọc như thế này:
let x = document.cookie;
document.cookiesẽ 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 nó:
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 một 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 document.cookietí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 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 mộ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 một cái gì đó như:
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 một hàm JavaScript để tìm kiếm giá trị cookie trong chuỗi cookie.
Ví dụ về cookie JavaScript
Trong ví dụ tiếp theo, 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, họ 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 sau khi khách truy cập vào cùng một trang, họ sẽ nhận được thông báo chào mừng.
Đối với ví dụ, chúng tôi sẽ tạo 3 hàm JavaScript:
- Một chức năng để đặt một giá trị cookie
- Một chức năng để nhận một giá trị cookie
- Một chức năng để kiểm tra một giá trị cookie
Một chức năng để thiết lập một cookie
Đầu tiên, chúng tôi tạo một functionlưu trữ tên của khách truy cập trong một biến cookie:
Thí 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ụ được 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 (ngày thường).
Hàm đặt cookie bằng cách thêm tên cookie, giá trị cookie và chuỗi hết hạn lại với nhau.
Chức năng lấy cookie
Sau đó, chúng tôi tạo một functiontrả về giá trị của một cookie được chỉ định:
Thí 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 được giải thích:
Lấy tên cookie làm tham số (cname).
Tạo một biến (tên) với văn bản cần tìm (cname + "=").
Giải mã chuỗi cookie, để xử lý các 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 có tên 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 cookie được tìm thấy (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 tôi tạo chức năng kiểm tra xem cookie có được đặt hay không.
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 của 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 setCookiehàm:
Thí 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 ngay bây giờ
Thí 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);
}
}
}
Ví dụ trên chạy checkCookie()chức năng khi tải trang.