HOME › học javascript - lập trình javascript cơ bản>>16. javascript và broswer

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

28 tháng 6 ,2022

Bài viết đăng tại: https://laptrinhcanban.com

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ính	Cú pháp	Công dụng
Expires	Expires=DATE	Thời điểm hết hạn (tính theo ngày)
Max-Age	Max-Age=Second	Thời điểm hết hạn (tính theo số giây)
Domai	Domain=DOMAIN	DOMAIN mà Cookie được gửi
Path	Path=PATH	Đường dẫn mà Cookie được gửi
Secure	Secure	Chỉ gửi cookie khi path ở dạng https
HttpOnly	HttpOnly Không thể xử lý cookie bằng document.cookie
SameSite	SameSite=VAL	Có 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.