NỘI DUNG BÀI VIẾT
Trong bài viết này, mình sẽ hướng dẫn các bạn đi trả lời cho câu hỏi “Cookie là gì?”.
Vậy Cookie là gì?
Cookie là dữ liệu, lưu trữ thông tin của người dùng trong những file text nhỏ trên máy tính của người dùng.
Khi một web server gửi một trang web đến trình duyệt, rồi kết nối bị tắt đi và server quên đi tất cả mọi thứ của người dùng
Cookie được tạo ra để giải quyết vấn đề làm thế nào để nhớ thông tin người dùng
- Khi một người dùng thăm một trang web, tên của người dùng có thể được lưu trữ trong cookie
- Lần sau, người dùng cũng thăm trang web đấy, cookie vẫn nhớ tên của người dùng
Cookie sẽ lưu trong cặp tên-giá trị như
username = hocjavascript
Khi trình duyệt gửi một request đến server từ một trang web, cookie của trang sẽ được thêm vào request gửi đi. Bằng cách này server có thể nhớ được các thông tin cần thiết của người dùng
Javascript có thể tạo mới, đọc và xóa cookie cùng với thuộc tính document.cookie
Các thao tác với Cookie
1. Tạo Cookie trong JavaScript
Trong JavaScript, một cookie có thể tạo ra bằng cách
document.cookie = "username=hocjavascript";
Bạn cũng có thể thêm vào ngày hết hạn expires (trong UTC time). Bởi theo mặc định, cookie sẽ bị xóa nếu trình duyệt bị đóng lại
document.cookie = "username=hocjavascript; expires=Thu, 15 Jan 2021 12:00:00 UTC";
Cùng với path parameter, bạn có thể nói cho trình duyệt nơi cookie thuộc về. Bởi theo mặc định, cookie sẽ thuộc trang hiện tại
document.cookie = "username=hocjavascript; expires=Thu, 15 Jan 2021 12:00:00 UTC; path=/";
2. Đọc Cookie trong JavaScript
Trong JavaScript, cookie có thể đọc bằng cách
var x = document.cookie;
document.cookie sẽ trả lại tất cả cookie trong một chuỗi tring kiểu như: cookie1=giá trị; cookie2=giá trị; cookie3=giá trị;
3. Thay đổi Cookie trong JavaScript
Trong JavaScript, bạn có thể thay đổi một cookie giống như cách mà bạn tạo ra cookie
document.cookie = "username=hocjavascript; expires=Thu, 15 Jan 2021 12:00:00 UTC; path=/";
Vậy là cookie cũ đã bị ghi đè.
4. Xóa một Cookie trong JavaScript
Xóa một cookie rất là đơn giản. Chỉ cần xét lại giá trị ngày hết hạn expires về những thời gian trước đấy
document.cookie = "username=; expires=Thu, 15 Jan 2021 12:00:00 UTC";
5. Chuỗi Cookie
Thuộc tính document.cookie trông giống như một chuỗi text bình thường. Nhưng nó không hoàn toàn đơn giản như vậy
Nếu bạn lưu giá trị vào cookie, khi bạn lấy thông tin của cookie ra, bạn chỉ đọc được tên-giá trị theo từng cặp
Nếu bạn tạo một mới một cookie, giá trị cookie cũ sẽ không bị ghi đè. Giá trị cookie mới sẽ được thêm vào document.cookie, do đó nếu bạn đọc document.cookie lần nữa thì bạn sẽ nhận được chuỗi string giống như:
cookie1 = giá trị; cookie2 = giá trị;
Nếu bạn muốn tìm giá trị cookie cụ thể, bạn phải viêt một hàm JavaScript để tìm kiếm cho các giá trị cookie trong chuỗi cookie.
Ví dụ Cookie trong JavaScript
Trong ví dụ bên dưới, ta sẽ tạo một cookie lưu tên của khách hàng truy cập
Lần đầu tiên một người dùng truy cập đến trang web, sẽ được yêu cầu điền vào tên của mình, hệ thống sẽ lưu trữ tên này trong cookie.
Sau này, lại người dùng đấy truy cấp đến trang trên, ông lại nhận được thông điệp chào mừng đã quay trở lại.
Trong các ví dụ sau, chúng ta sẽ tạo ra 3 function trong JavaScript
- Một function để thiết lập giá trị cookie
- Một function để lấy một giá trị cookie
- Một function để kiểm tra một giá trị cookie
1. Một function để thiết lập giá trị Cookie
Ví dụ
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;
}
Tham số của function phía 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)
2. Một function để lấy một giá trị Cookie
Sau đây, chúng ta sẽ tạo ra một function để trả về giá trị của một cookie cụ thể
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 "";
}
Tham số truyền vào là cname
Tạo một biến name và thêm vào “=” để tìm kiếm
Chia document.cookie dựa trên dấu ; thành một mảng nhiều phần tử và gán mảng đấy cho biến ca
Vòng lặp (i=0; i<ca.length; i++) để đọc mỗi giá trị c = ca[i]
Nếu cookie được tìm thấy (c.indexOf(name)==0), trả về giá trị của cookie (c.substring(name.length,c.length). Nếu cookie không được tìm thấy, trả về “”
3. Một function để kiểm tra Cookie
Cuối cùng, chúng ta sẽ tạo một function kiểm tra nếu cookie đã được thiết lập
Nếu cookie được thiết lập, 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 prompt box, hỏi tên của người dùng, lưu trữ tên của người dùng ở cookie trong 365 ngày, bằng việc gọi function setCookie đã được viết ở trên
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);
}
}
}
Kết Luận
Bài viết của mình còn đơn giản và chỉ là một phần rất nhỏ trong kho kiến thức về JavaScript, rất mong nhận được sự đóng góp ý kiến của các bạn.
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
