Show Cùng tìm hiểu về Cookie trong JavaScript. Bạn sẽ biết Cookie trong JavaScript là gì cũng như các cách thao tác với Cookie trong JavaScript sau bài học này. Cookie trong JavaScript là gìCookie trong JavaScript hay còn gọi là Cookie HTTP, cookie web, cookie trình duyệt là một phần dữ liệu nhỏ được lưu trữ tại trình duyệt web của người dùng. Cookie có thể được máy chủ gửi đến trình duyệt và lưu giũ tại trình duyệt, và ngược lại thì trình duyệt cũng có thể gửi lại cookie đã lưu thông tin tới máy chủ. Cookie được sử dụng chủ yếu để lưu thông tin của người dùng, ví dụ như tên, ip hoặc thời gian truy cập chẳng hạn. Để thao tác và làm việc với Cookie trong JavaScript, chúng ta cần sửu dụng tới thuộc tính cookie của window.document Object như sau: document.cookie Tạo Cookie trong JavaScriptCookie trong JavaScript được lưu giữ dưới định dạng một cặp tên kèm giá trị document.cookie = Trong đó Ví dụ cụ thể: document.cookie = "username=kiyoshi"; Lại nữa, chúng ta cũng có thể lưu đồng loạt nhiều cookie vào trong document.cookie, với các cookie (các cặp name-value) cách nhau bởi dấu chấm phẩy như sau: document.cookie = Ví dụ: document.cookie = "username=kiyoshi; old=31"; Tất nhiên chúng ta cũng có thể ghi lần lượt từng cookie vào document.cookie như sau: document.cookie = "username=kiyoshi"; Bạn cũng có thể sử dụng biến để tạo cookie như sau: let myname = 'kiyoshi'; Lưu ý nếu giá trị của document.cookie = "onakaga=" + encodeURIComponent('へった'); Cuối cùng, ngoài tên và giá trị thì bạn cũng có thể chỉ định thêm nhiều thuộc tính khác cho cookie, ví dụ như thêm cả thời gian hết hạn cho một cookie với thuộc tính expires chẳng hạn: document.cookie = "username=kiyoshi; expires=Mon, 27 Dec 2022 19:00:00 UTC;"; Hướng dẫn cụ thể đã được Kiyoshi chia sẻ trong bài dưới đây:
Đọc Cookie trong JavaScriptĐể đọc toàn bộ các Cookie trong JavaScript, chúng ta tham chiếu trực tiếp đến document.cookie như sau: document.cookie Khi đó, toàn bộ các cookie được liên kết với trang web đang mở sẽ được lấy. Ví dụ cụ thể, chúng ta có thể in toàn bộ các cookie ra màn hình console với mã lệnh sau: console.log(document.cookie); Chúng ta cũng có thể gán document.cookie vào một biến và sử dụng trong chương trình như sau: var x = document.cookie; Lấy Cookie bằng tên của nó trong JavaScriptKhi tham chiếu trực tiếp đến document.cookie, toàn bộ các cookie (các cặp name-value) liên kết với trang web hiện tại sẽ được lấy ra. Tuy nhiên thì chúng ta cũng có thể lấy ra một cookie với tên cụ thể từ trong các cookie đó, với mã lệnh sau đây: let cookies = document.cookie; Chúng ta cũng có thể sử dụng đến biểu thức chính quy để làm việc này. var cookies = document.cookie; Thay đổi Cookie trong JavaScriptĐể thay đổi Cookie trong JavaScript, chúng ta đơn giản ghi đè nội dung cookie mới có cùng tên vào document.cookie = Trong đó Ví dụ, chúng ta có thể tạo một cookie có tên là document.cookie = "username=kiyoshi"; Khi đó cookie có Xoá Cookie trong JavaScriptĐể xoá Cookie trong JavaScript, chúng ta cần thiết lập thời gian hết hạn của nó (bằng thuộc tính Expires) bằng một mốc thời gian trong quá khứ, hoặc là thiết lập thời gian tồn tại của nó (bằng thuộc tính Max-Age) bằng 0. Ví dụ, nếu thời gian hiện tại là document.cookie = 'username=kiyoshi; Expires=Mon, 06 Jan 2000 18:11:30 GMT'; Xoá toàn bộ Cookie trong JavaScriptĐể xoá toàn bộ Cookie trong JavaScript, chúng ta cần xoá từng cookie đã thiết lập bằng một trong hai phương pháp mà Kiyoshi đã giới thiệu ở trên. Để làm được điều đó, chúng ta cần dùng vòng lặp để truy cập và thiết lập cho từng cookie với mã lệnh sau: let cookies = document.cookie; Mã mẫuSau đây hãy cũng xem demo về Cookie trong JavaScript bằng mã HTML sau đây: <!DOCTYPE html> Với mã HTML này, khi click vào nút view thì các cookie sẽ được tạo ra và ghi vào document.cookie như sau: Sau đó
khi khi click vào nút delete thì toàn bộ các cookie có trong trang web hiện tại sẽ bị xoá đi: Tổng kếtTrên đây Kiyoshi đã hướng dẫn bạn về 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>> học javascript - lập trình javascript cơ bản>>16. javascript và broswer Bài sauThay đổi kích thước màn hình bằng JavaScript (window.resizeTo,window.resizeBy) Bài tiếpThiết lập thuộc tính Cookie trong JavaScript |