Cách dùng cookie trong javascript

Công nghệ Lập trình JavaScript

21/12
Thạch
JavaScript
0
329

Cách sử dụng cookie trong javascript, cách thiết lập cookie và lấy giá trị của cookie bằng javascript, những ưu điểm và nhược điểm khi sử dụng cookie

Bài 44: History trong Javascript - quản lý lịch sử lướt web với javascript

Trong bài này chúng ta sẽ học cách sử dụng cookie trong javascript, qua đó sẽ giúp bạn quản lý được dữ liệu mà trình duyệt đã lưu trữ trên trang web của bạn.

Cookie là một đối tượng không thể thiếu trong các trình duyệt. Để thao tác được với cookie thì chúng ta phải dựa vào Javascript, bởi trình duyệt chỉ cho phép ta sử dụng javascript để lập trình.

Kể từ khi HTML5 ra đời thì chúng ta có thêm hai đối tượng, đó là localStore và sessionStore, được nhận định là có thể thay thế cho cookie. Tuy nhiên, điều này chỉ đúng khi bạn muốn lưu trữ dữ của riêng bạn trên trình duyệt, bởi bản chất trình duyệt vẫn phải sử dụng cơ chế của cookie.

1. Cookie trong javascript là gì?

Cookie là dữ liệu được lưu trữ trong một file text, và nằm trong máy tính, 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 bạn 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.

Để hiểu rõ hơn cookie là gì và tại sao lại sử dụng cookie thì mình đặt một trường hợp thế này:

Giả sử bạn muốn lưu trữ một thông tin nào đó tại mỗi client (browser), và các lần truy cập tiếp theo (ngày mai, ngày một, một ngày nào đó, ..) có thể sử dụng được thông tin đó thì phải làm thế nào? Nếu sử dụng session trong PHP thì chỉ lưu trữ được một khoảng thời gian nhất định. Vậy giải pháp là ta sẽ sử dụng cookie.

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

website=Sinitc.com

Khi trình duyệt gửi thông tin lên server thì cookies sẽ được gửi kèm theo. Chính vì vậy, trong ngôn ngữ phía backend như PHP, JSP.. cũng sẽ nhận được thông tin đó. Đây cũng là thông tin để trả lời cho câu hỏi tạo sao Cookie được lưu trữ ở Client mà trên Server vẫn đọc được, và ta cũng hay sử dụng Cookie để xây dựng chức năng Remember Me khi Login.

2. Các thao tác với Cookie trong Javascript

Javascript có thể đọc, thêm và xóa cookie một cách dễ dàng thông qua đối tượng document.cookie.

Tạo Cookie

Như mình đã nói, cookie trên trình duyệt sẽ lưu ở dạng name=value, nên để tạo cookie thì ta sử dụng chuỗi dữ liệu giống như vậy.

Ví dụ: Lưu trữ chuỗi cookie chứa thông tin website.

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

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


document.cookie = 'website=Sinitc.com';
document.cookie = '[email protected]';

Để thiết lập thời gian sống cho cookie thì ta sử dụng từ khóa expires, đặt trong cấu trúc của chuỗi cookie và ngăn cách bởi dấu hai chấm. Định dạng thời gian là UTC.

document.cookie="website=Sinitc.com; expires=Thu, 0 Dec 2022 12:00:00 UTC";

Theo mặc định thì khi bạn ở trang nào thì cookie sẽ lưu với đường dẫn trang đó. Tuy nhiên nếu bạn muốn thay đổi đường dẫn thì sử dụng từ khóa path.

Ví dụ: Path là trang home - domain gốc của website.

document.cookie="website=Sinitc.com; expires=Thu, 0 Dec 2015 12:00:00 UTC;path=\";

Lấy giá trị Cookie

Để lấy danh sách các Cookie thì ta sử dụng cú pháp như sau:

var giatri = document.cookie;

Lúc này kết quả sẽ trả về một chuỗi Cookie có cấu trúc name=value, trường hợp bạn lưu nhiều cookie thì nó sẽ có dạng name1=value1;name2=value2.

Đổi giá trị cho Cookie

Để thay đổi giá trị cho Cookie thì bạn chỉ việc gán lại giá trị cho cookie.

// Giá trị cũ
document.cookie = "domain=Sinitc.com";
 
// Đổi sang giá trị mới
document.cookie = "domain=Sinitc.com";

Xóa Cookie

Trong Javascript không có hàm xóa Cookie mà bạn phải sử dụng từ khóa expires để thiết lập thời gian sống cho Cookie là khoảng thời gian đã qua. Ví dụ hôm nay là ngày 8/11/2015 thì bạn chỉ việc gán expires là 7/8/2015 là đã xóa được Cookie đó.

3. Viết hàm xử lý Cookie trong Javascript

Vì cookie được lưu trữ ở dạng chuỗi các cặp key=value, và các chuỗi giá trị cách nhau bởi dấu chấm phẩy ; nên để lấy một giá nào đó bạn phải xử lý chuỗi rất phức tạp. Vì vậy, chúng ta phải viết hàm tạo và lấy cookie để sau này sử dụng tiện lợi hơn.

Sau đây là hai hàm các bạn tham khảo.

<!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("Welcome again " + user);
  } else {
     user = prompt("Please enter your name:","");
     if (user != "" && user != null) {
       setCookie("username", user, 30);
     }
  }
}
</script>
</head>

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

</html>

Bạn chỉ việc truyền các tham số vào hàm là đã tạo và lấy được Cookie.

4. Một số lưu ý khi sử dụng cookie trong javascript

Javascript được chạy và biên dịch tại client, nên nó không có tính bảo mật cao.

Khi bạn lưu dữ liệu vào cookie thì dữ liệu sẽ được lưu trên chính máy tính của khách. Vì vậy, bạn không nên lưu những dữ liệu mang tính bảo mật như mật khẩu, số thẻ ngân hàng ... mà chỉ lưu những thông tin cơ bản.

Mỗi domain chỉ được lưu một dung lượng vào cookie có giới hạn. Vì vậy, bạn không nên lưu những dữ liệu quá lớn, điều này sẽ không đảm bảo tính toàn vẹ của dữ liệu.

5. Lời kết

Việc sử dụng cookie trong Javascript rất thường xuyên. Tuy nhiên, để gán và lấy giá trị cookie thì bạn phải thông qua các giai đoạn tách chuỗi và gán chuỗi rất phức tạp. Đó chính là nhược điểm duy nhất của cookie. Vì vậy, tốt nhất bạn nên sử dụng hai hàm setCookie và getCookie mà mình đã cung cấp ở trên.

Bài 46: Cách dùng window.navigator trong Javascript