Thiết lập thuộc tính Cookie trong JavaScript | Laptrinhcanban.com

Thiết lập thuộc tính Cookie trong JavaScript

Cùng tìm hiểu về các thuộc tính của Cookie trong JavaScript. Để tạo Cookie chúng ta cần chỉ định ít nhất tên và giá trị của nó, tuy nhiên bằng cách kết hợp thêm các thuộct tính khác, bạn có thể linh động hơn trong xử lý với cookie bằng JavaScript.

Chúng ta có thể chỉ định các thuộc tính dưới đây cho cookie trong JavaScript:

Tên thuộc tínhCú phápCông dụng
ExpiresExpires=DATEThời điểm hết hạn (tính theo ngày)
Max-AgeMax-Age=SecondThời điểm hết hạn (tính theo số giây)
DomaiDomain=DOMAINDOMAIN mà Cookie được gửi
PathPath=PATHĐường dẫn mà Cookie được gửi
SecureSecureChỉ gửi cookie khi path ở dạng https
HttpOnlyHttpOnly Không thể xử lý cookie bằng document.cookie
SameSiteSameSite=VALCó gửi cookie qua các trang web khác hay không

Để chỉ định các thuộc tính này cùng với name và value khi tạo Cookie, chúng ta viết chúng sau dấu chấm phẩy như sau:

document.cookie = ‘NAME=VALUE; Max-Age=100; Domain=example.com’

Lưu ý là giá trị của các thuộc tính này sẽ không được lấy ra khi chúng ta dùng document.cookie để thao tác. Giá trị của các thuộc tính này chỉ có thể kiểm tra trực tiếp trên màn hình Browser mà thôi.

Để thiết lập thời điểm hết hạn của cookie, chúng ta có thể sử dụng tới thuộc tính Expires hoặc là Max-Age. Lưu ý là đơn vị của giá trị thiết lập với 2 thuộc tính này là khác nhau.

Đối với thuộc tính Expires chúng ta sử dụng cú pháp sau đây:

document.cookie = 'name=value; Expires=DATE';

Trong đó DATE là một định dạng thời gian của ngày cụ thể. Ví dụ như sau:

document.cookie = 'username=kiyoshi; Expires=Mon, 06 Jan 2000 18:11:30 GMT';

Đối với thuộc tính Max-Age chúng ta sử dụng cú pháp sau đây:

document.cookie = 'name=value; Max-Age=Millisecond';

Trong đó Millisecond là số giây mà cookie sẽ tồn tại. Ví dụ như sau:

document.cookie = 'username=kiyoshi; Max-Age=120';

Theo mặc định, cookie được lưu trữ trong trình duyệt của người dùng chỉ gửi cookie khi người dùng truy cập một trang có cùng tên máy chủ với trang mà người dùng đó đã lưu cookie. Ví dụ, nếu một Cookie được lưu khi người dùng truy cập vào trang www.example.com/dir/index.html thì trình duyệt cũng sẽ chỉ có thể gửi Cookie đến các web có cùng domain là www.example.com mà thôi. Chứ Cookie sẽ không thể gửi đến các domain khác, ví dụ như sub domain sub.www.example.com chẳng hạn.

Tuy nhiên chúng ta cũng có thể thay domain gốc thành các domain liên quan với nó để gủi Cookie trong JavaScript thông qua thuộc tính domain của Cookie, với cú pháp sau đây:

document.cookie = 'name=value; Domain= other_domain';

Lưu ý, thuộc tính domain chỉ có thể được đặt thành máy chủ đã cấp cookie hoặc miền cao hơn của nó. Nếu bạn đặt thuộc tính domain, cookie sẽ được gửi đến các máy chủ sử dụng domain đó và các domain phụ. Chúng ta không thể sử dụng thuộc tính này để đặt một domain hoàn toàn không liên quan gì tới domain ban đầu.

Theo mặc định, cookie được lưu trữ trong trình duyệt của người dùng chỉ gửi cookie khi người dùng truy cập một trang có cùng cùng đường dẫn với trang mà người đó đã lưu cookie. Ví dụ, nếu một Cookie được lưu khi người dùng truy cập vào trang www.example.com/dir/index.html thì trình duyệt cũng sẽ chỉ có thể gửi Cookie khi người đó truy cập một trang có đường dẫn có cùng tiền tố /dir/index.

Tuy nhiên chúng ta cũng có thể thay Path để gủi Cookie trong JavaScript thông qua thuộc tính Path của Cookie, với cú pháp sau đây:

document.cookie = 'name=value; Path=/dir';

Lưu ý, thuộc tính Path chỉ có thể được chỉ định với Path gốc hoặc các Path gần nó. Chúng ta không thể sử dụng thuộc tính này để đặt một Path hoàn toàn không liên quan gì tới Path ban đầu.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về các thuộc tính của Cookie trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.