Hướng dẫn dùng cppkie 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