Giới Thiệu
Cookie sẽ lưu giữ thông tin của người dùng trên các trang của website
Vậy cookie là gì?
Cookie là dữ liệu, lưu dữ 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, coookie vẫn nhớ tên của người dùng.
Cookie sẽ lưu trong cặp tên-giá trị như
username = framgia
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=framgia";
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=framgia; expires=Thu, 18 Dec 2016 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=framgia; expires=Thu, 18 Dec 2016 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=framgia company; expires=Thu, 18 Dec 2016 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, 01 Jan 1970 00: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
Các 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