Cookie trong JavaScript
Cookies là một dạng lưu trữ dữ liệu trên máy người dùng, nó cho phép các bạn lưu lại dữ liệu nhập từ người dùng theo thời gian ấn định. Ví dụ như khi các bạn viếng thăm một trang web và đăng nhập với username và password, thì các bạn có thể lưu lại thông tin này ngay tại trình duyệt nếu như trang web đó có hỗ trợ Cookies (Với lựa chọn “Remmember me”). Để tìm hiểu về Cookie trong JavaScript, mời bạn đọc cùng tham khảo qua bài viết dưới đây.
Mục lục nội dung
1. 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.
2. 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=/";
3. Đọc cookie trong JavaScript
Với JavaScript, cookie có thể được đọc như sau:
var x = document.cookie;
document.cookie sẽ trả về tất cả các cookie trong một chuỗi giống như: cookie1 = value; cookie2 = value2; cookie3 = value3;
4. 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 đè.
5. 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=/";
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
6. 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.
7. 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 "";
}
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ề "".
Chức năng kiểm tra cookie
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:
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);
}
}
}
Trên đây là bài viết của eLib.VN về Cookie trong JavaScript. Cookie cho phép bạn lưu trữ thông tin người dùng trong các trang web. Đây là một kiến thức khá quan trọng, bạn đọc cần nghiên cứu kỹ. Chúc các bạn thành công!
Như vậy là chúng ta đã hoàn thành nội dung "JavaScript BOM". Để củng cố và nắm vững nội dung đã học, mời bạn cùng thử sức với "Bộ Câu hỏi Trắc Nghiệm JavaScript có đáp án chi tiết"
Tham khảo thêm
- doc Đối tượng Browser trong JavaScript
- doc Đối tượng window trong JavaScript
- doc Đối tượng History trong JavaScript
- doc Đối tượng Navigator trong JavaScript
- doc Đối tượng Screen trong JavaScript
