Cookie cho phép bạn lưu trữ thông tin người dùng trong các trang web.
Nội dung chính
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ột máy chủ web đã gửi một trang web đến một 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 đề "cách ghi nhớ thông tin về người dùng":
- Khi người dùng truy cập trang web, tên của anh ấy có thể được lưu trữ trong cookie.
- Lần tới khi người dùng truy cập trang, cookie "ghi nhớ" tên của anh ấy.
Cookie được lưu trong các cặp tên-giá trị như:
username = David Bishop
Khi trình duyệt yêu cầu một trang web từ máy chủ, các cookie thuộc trang đượ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.
Tạo Cookie trong JavaScript
JavaScript có thể tạo, đọc và xóa cookie với thuộc tính document.cookie.
Với JavaScript, một cookie có thể được tạo ra như sau:
document.cookie = "username = David Bishop";
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 = David Bishop;
expires=Thu, 18 Dec 2018 12:00:00 UTC";
Với một tham số đường dẫn, bạn có thể nói cho trình duyệt biết đường dẫn của cookie là gì. Theo mặc định, cookie thuộc về trang hiện tại.
document.cookie = "username = David Bishop;
expires=Thu, 18 Dec 2018 12:00:00 UTC";
Với một tham số đường dẫn, bạn có thể nói cho trình duyệt biết đường dẫn của cookie là gì. Theo mặc định, cookie thuộc về trang hiện tại.
document.cookie = "username = David Bishop;
expires=Thu, 18 Dec 2018 12:00:00 UTC; path=/";
Đọc cookie trong JavaScript
Với JavaScript, cookie có thể được đọc như sau:
var x = document.cookie;
Thay đổi Cookie trong JavaScript
Với JavaScript, bạn có thể thay đổi cookie giống như cách bạn tạo cookie:
document.cookie = "username = David Bishop;
expires=Thu, 18 Dec 2018 12:00:00 UTC; path=/";
Cookie cũ bị ghi đè.
Xóa cookie trong JavaScript
Xóa cookie rất đơn giản. Bạn không phải chỉ định giá trị cookie khi bạn xóa cookie. Chỉ cần đặt tham số expires thành ngày đã qua:
document.cookie = "username = David Bishop;
expires=Thu, 18 Dec 2018 12:00:00 UTC; path=/";
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 một chuỗi cookie toàn bộ vào document.cookie, khi bạn đọc lại nó, bạn chỉ có thể thấy cặp tên-giá trị của nó.
Nếu bạn tạo một cookie mới, các cookie cũ 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 mảng cookie như:
cookie1 = giá trị 1; cookie2 = giá trị 2;
Ví dụ:
<html>
<head>
<script>
function displayCookies() {
var fname = getCookie("firstname");
if (fname == null) {
fname = "";
}
if (fname != "") {
fname = "firstname=" + fname;
}
var lname = getCookie("lastname");
if (lname == null) {
lname = "";
}
if (lname != "") {
lname = "lastname=" + lname;
}
alert(fname + " " + lname);
}
function getCookie(name) {
var nameEQ = name + "=";
//alert(document.cookie);
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(nameEQ) != -1)
return c.substring(nameEQ.length, c.length);
}
return null;
}
</script>
</head>
<body>
<p>
<button type="button" onclick="displayCookies()">Hiển thị tất cả Cookies</button>
<button type="button"onclick="document.cookie='firstname=David; expires=Wed, 18 Dec 2023 12:00:00 GMT'">Tạo Cookie 1</button>
<button type="button" onclick="document.cookie='lastname=Bishop; expires=Wed, 18 Dec 2023 12:00:00 GMT'">Tạo Cookie 2</button>
<button type="button" onclick="document.cookie='firstname=;expires=Wed, 01 Jan 1970'">Xóa Cookie 1</button>
<button type="button" onclick="document.cookie='lastname=;expires=Wed, 01 Jan 1970'">Xóa Cookie 2</button>
</p>
</body>
</html>
Kết quả:
Nếu bạn muốn tìm giá trị của một cookie cụ thể, 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ụ để làm 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 một khách truy cập đến trang web, anh ta sẽ được yêu cầu điền tên của mình. Tên này sau đó được lưu trữ trong một cookie.
Lần sau khi khách truy cập đến cùng một trang, anh ấy sẽ nhận được thông báo chào mừng.
Trong ví dụ này, chúng ta sẽ tạo 3 hàm JavaScript:
- Một hàm để tạo giá trị cookie
- Một hàm để lấy giá trị cookie
- Một hàm để kiểm tra giá trị cookie
Chức năng tạo cookie
Đầu tiên, chúng ta tạo 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:
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 này tạo 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 lấy giá trị cookie
Sau đó, chúng ta tạo một hàm trả về giá trị của một cookie 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:
Lấy tên cookie làm tham số (cname).
Tạo một biến (name) với chuỗi để tìm kiếm (cname + "=").
Giải mã chuỗi cookie, để xử lý các cookie với các ký tự đặc biệt, ví dụ: '$'.
Chia 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 Nếu cookie được tìm thấy (c.indexOf (tên) == 0), trả về giá trị của cookie (c.substring (name.length, c.length). Nếu không tìm thấy cookie, trả về "". Cuối cùng, chúng ta tạo ra 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 thiết lập, nó sẽ hiển thị một hộp nhắc nhở, 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:
Chức năng kiểm tra cookie
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);
}
}
}
