Tìm hiểu cookie trong javascript

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 <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