Cookie trong JavaScript: Ví dụ về Set, Get & Delete

Bởi: James Hartman James Hartman
Hours cập nhật

Cookies là gì?

Cookie là một phần dữ liệu được lưu trữ trên máy tính của bạn để trình duyệt của bạn có thể truy cập. Bạn cũng có thể đã tận hưởng những lợi ích của cookie một cách có chủ ý hoặc vô tình. Bạn đã bao giờ lưu mật khẩu Facebook của mình để không phải nhập mật khẩu mỗi lần bạn thử đăng nhập chưa? Nếu có, thì bạn đang sử dụng cookie. Cookie được lưu dưới dạng cặp khóa/giá trị.

Tại sao bạn cần Cookie?

Sự giao tiếp giữa một trình duyệt web và máy chủ xảy ra bằng cách sử dụng giao thức không trạng thái có tên HTTP. Giao thức không trạng thái xử lý từng yêu cầu một cách độc lập. Vì vậy, máy chủ không giữ lại dữ liệu sau khi gửi đến trình duyệt. Nhưng trong nhiều trường hợp, dữ liệu sẽ được yêu cầu lại. Ở đây có cookie thành một bức tranh. Với cookie, trình duyệt web sẽ không phải liên lạc với máy chủ mỗi khi dữ liệu được yêu cầu. Thay vào đó, nó có thể được lấy trực tiếp từ máy tính.

Javascript Đặt cookie

Bạn có thể tạo cookie bằng document. thuộc tính cookie như thế này.

document.cookie = "cookiename=cookievalue"

Bạn thậm chí có thể thêm ngày hết hạn vào cookie của mình để cookie cụ thể sẽ bị xóa khỏi máy tính vào ngày đã chỉ định. Ngày hết hạn phải được đặt ở định dạng UTC/GMT. Nếu bạn không đặt ngày hết hạn, cookie sẽ bị xóa khi người dùng đóng trình duyệt.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2014 20:00:00 UTC"

Bạn cũng có thể đặt tên miền và đường dẫn để chỉ định tên miền nào và thư mục nào trong tên miền cụ thể mà cookie thuộc về. Theo mặc định, cookie thuộc về trang đặt cookie.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2014 20:00:00 UTC; path=/ "

//tạo cookie có tên miền tới trang hiện tại và đường dẫn đến toàn bộ tên miền.

JavaScript lấy Cookie

Bạn có thể truy cập cookie như thế này, nó sẽ trả về tất cả cookie đã lưu cho tên miền hiện tại.

var x =  document.cookie

JavaTập lệnh xóa cookie

Để xóa cookie, bạn chỉ cần đặt giá trị của cookie thành trống và đặt giá trị hết hạn thành ngày đã qua.

document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"

Hãy tự mình thử ví dụ này

Hướng dẫn đặc biệt để mã hoạt động… Nhấn nút chạy hai lần

<html>
<head>
	<title>Cookie!!!</title>
	<script type="text/javascript">
		function createCookie(cookieName,cookieValue,daysToExpire)
        {
          var date = new Date();
          date.setTime(date.getTime()+(daysToExpire*24*60*60*1000));
          document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
        }
		function accessCookie(cookieName)
        {
          var name = cookieName + "=";
          var allCookieArray = document.cookie.split(';');
          for(var i=0; i<allCookieArray.length; i++)
          {
            var temp = allCookieArray[i].trim();
            if (temp.indexOf(name)==0)
            return temp.substring(name.length,temp.length);
       	  }
        	return "";
        }
		function checkCookie()
        {
          var user = accessCookie("testCookie");
          if (user!="")
        	alert("Welcome Back " + user + "!!!");
          else
          {
            user = prompt("Please enter your name");
            num = prompt("How many days you want to store your name on your computer?");
            if (user!="" && user!=null)
            {
            createCookie("testCookie", user, num);
            }
          }
        }
	</script>
</head>
<body onload="checkCookie()"></body>
</html>