1. Cookie trong JavaScript là gì?

Cookie là nơi cho phép ta lưu trữ dữ liệu của người dùng trong trình duyệt. Cookie là dữ liệu được lưu trữ trong một file text. Nó sẽ nằm trong máy tính của người dùng. Nên việc lưu trữ cookie sẽ là vĩnh viễn hoặc là một thời gian cụ thể, tất cả đều do chính ta thiết lập. Tuy nhiên, mỗi domain chỉ có một dung lượng cookie tối đa, nên hãy lưu ý cho trường hợp cần lưu dữ liệu quá lớn.

Cookie là một phần của giao thức HTTP. Trong hầu hết các trang web, nó được yêu cầu duy trì giữa các trang khác nhau. Ví dụ: thông tin đăng nhập trên các trang web khác nhau của bất kỳ trang web nào được duy trì thông qua thông tin cookie . Cookie là một trong những cách hiệu quả nhất để theo dõi và ghi nhớ các hành động, sở thích, mua hàng, sở thích,…

Cookie được lưu trữ ở dạng name=value , ví dụ:

website=laptrinhtudau.com

Chú ý

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ộ. Ta có thể bật nó lên trong phần cài đặt -> bảo mật và quyền riêng tư.

2. Tạo cookie bằng JavaScript

Ta có thể sử dụng thuộc tính document.cookie để tạo một cookie . Không những thế document.cookie còn có thể đọc và xóa cookie

Ví dụ: tạo một cookie như sau

document.cookie = 'website=laptrinhtudau.com';

Trường hợp ta muốn lưu trữ nhiều Cookie thì chỉ việc tạo hai lần.

document.cookie = 'website=laptrinhtudau.com';
document.cookie = 'email=laptrinhtudau@gmail.com';

3. Đọc và thay đổi cookie bằng JavaScript

Ta có thể sử dụng phương thức document.cookie để được trả về tất cả các cookie được liên kết với document .

Ví dụ: kiểm tra xem trình duyệt của ta có lưu trữ cookie nào ở trang web này không

let allCookies = document.cookie;
alert(allCookies); // trả về chuỗi trống nếu không có cookie

document.cookie trả về tất cả cookie trong 1 chuỗi được phân tách bằng dấu chấm phẩy và dấu cách, như: cookie1: value1; cookie2: value2; cookie3: value3;

Để thay đổi giá trị của cookie thì ta tạo cookie mới có tên cùng với tên cookie cũ muốn thay đổi. Cookie cũ sẽ bị ghi đè. Ta cũng chỉ sử dụng document.cookie như lúc tạo cookie bình thường

Ví dụ:

document.cookie = "username=; expires=Thu, 09 Jan 1990 00:00:00 UTC; path=/;";

Từ khóa path giúp ta thay đổi đường dẫn

4. Xóa cookie bằng JavaScript

Xóa cookie khá là đơn giản. Ta sẽ không cần phải chỉ định cookie khi xóa nó. Thay vào đó ta chỉ cần đặt thời gian hết hạn cho nó. Thời gian này chỉ cần là thời gian trong quá khứ và theo giờ UTC là được.

Ví dụ:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Ta nên xác định đường dẫn cookie để đảm bảo rằng sẽ xóa đúng cookie . Một số trình duyệt sẽ không cho phép xóa cookie nếu ta không chỉ định đường dẫn.

5. Chuỗi cookie trong JavaScript

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 ta viết toàn bộ chuỗi cookie vào document.cookie. Khi đọc lại, ta chỉ có thể thấy cặp name-value của nó. Nếu ta đặ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 ta đọc lại document.cookie sẽ thấy được một cái gì đó như:

cookie1 = value; cookie2 = value;

Ở đây nếu muốn tìm giá trị cookie được chỉ định ta cần phải tạo hàm Js. Ta sẽ học ngay phần sau

6. Xây dựng hàm JavaScript để xử lý cookie

6.1. Thiết lập mộ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 trong một biến cookie :

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=/";
}

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 thiết lập 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.

6.2. Lấy một cookie

Ta sẽ tạo một function trả về giá trị của một cookie được chỉ định:

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 "";
}

Lấy tên cookie làm tham số (cname). Tạo một biến (name) với văn bản cần tìm (cname + “=”). Sau đó giải mã chuỗi cookie để xử lý các ký tự đặc biệt. 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), 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ề “” .

6.3. Kiểm tra cookie

Cuối cùng ta tạo hàm kiểm tra xem cookie có được đặt hay không. Nếu có sẽ hiểu thị một thông bá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 hàm setCookie

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);
    }
  }
}

Sau khi xong 3 phần trên ta có một chương trình đầy đủ như sau:

<!DOCTYPE html>
<html>
<head>
<script>
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 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 "";
}

function checkCookie() {
  let user = getCookie("username");
  if (user != "") {
    alert("Chào mừng trở lại " + user);
  } else {
     user = prompt("Xin hãy nhập tên của bạn:","");
     if (user != "" && user != null) {
       setCookie("username", user, 30);
     }
  }
}
</script>
</head>

<body onload="checkCookie()"></body>

</html>