Làm cách nào để nhận giá trị cookie cụ thể trong JavaScript?

Các cookie được lưu trữ trong trình duyệt của bạn trong khoảng thời gian 30 ngày và chúng chỉ có thể truy cập được từ cùng một miền với trang mà chúng được đặt

1. Hàm getCookie()

 

Để hiển thị giá trị của cookie có tên field1, chúng ta chỉ cần sử dụng như sau

Nếu bạn xem nguồn của trang này, bạn sẽ thấy rằng đây là cách các giá trị cookie được trình bày trong danh sách trên

Cookies được lưu trữ trong tài liệu. đối tượng JavaScript cookie mà trong trình duyệt của bạn hiện đang giữ các cặp tên/giá trị sau

Mỗi cặp tên/giá trị được hiển thị ở trên đại diện cho một cookie. Một cookie có thể chứa tới 4kb văn bản và đối với mỗi tên miền, trình duyệt của bạn thường sẽ cho phép tối đa 20 cookie

Các giá trị này sẽ được lưu trữ trong trình duyệt của bạn trong khoảng thời gian 30 ngày. Các giá trị cookie chỉ có thể truy cập được từ cùng miền với trang mà chúng được đặt. Nói cách khác, những giá trị cookie này có thể được truy cập ở bất kỳ đâu trên The Art of Web, chứ không phải từ bất kỳ trang web nào khác

Hàm getCookie()

Để hiển thị giá trị của cookie có tên field1, chúng ta chỉ cần sử dụng như sau

Nếu bạn xem nguồn của trang này, bạn sẽ thấy rằng đây là cách các giá trị cookie được trình bày trong danh sách trên

tài liệu. bánh quy

Cookies được lưu trữ trong tài liệu. đối tượng JavaScript cookie mà trong trình duyệt của bạn hiện đang giữ các cặp tên/giá trị sau

Mỗi cặp tên/giá trị được hiển thị ở trên đại diện cho một cookie. Một cookie có thể chứa tới 4kb văn bản và đối với mỗi tên miền, trình duyệt của bạn thường sẽ cho phép tối đa 20 cookie

cookie cũ

Một cookie sẽ nằm trong trình duyệt của bạn cho đến khi

  1. nó bị xóa bởi bạn hoặc bởi trang web đã đặt nó;
  2. nó được 'ra mắt' để nhường chỗ cho một cookie mới hơn;
  3. nó đạt đến ngày hết hạn

Như đã đề cập ở trên, trình duyệt của bạn đặt giới hạn cả về kích thước và số lượng cookie mà nó cho phép đối với một miền. Nếu đã đạt đến giới hạn về số lượng cookie và một cái mới được đặt, thì cookie cũ nhất sẽ hết hạn để nhường chỗ cho cái mới (FIFO)

Một sự giám sát phổ biến là đặt cookie có ngày hết hạn (ví dụ 1 năm) và sau đó không bao giờ đặt lại cookie. Sau một năm, bất kể các hành động khác, cookie sẽ hết hạn. Nếu bạn có một trang web dựa vào cookie để lưu tùy chọn của người dùng hoặc xác định khách hàng thường xuyên, bạn nên đảm bảo đặt lại cookie mỗi khi họ truy cập

Chức năng lấy giá trị cookie theo tên sẽ cực kỳ hữu ích cho các nhà phát triển web muốn tạo các trang web động. Bằng cách có thể truy cập giá trị của cookie, nhà phát triển có thể lưu trữ tùy chọn của người dùng hoặc theo dõi hành vi của người dùng

Trong bài đăng này, chúng tôi sẽ giải thích nhiều phương pháp để lấy giá trị cookie bằng cách sử dụng tên của nó

1. Hàm này trả về giá trị của một cookie được chỉ định

2. Trước tiên, hàm định nghĩa một biến c_name, lưu trữ tên cookie được nối với dấu bằng

3. Sau đó, nó giải mã mọi ký tự được mã hóa trong cookie bằng cách sử dụng hàm decodeURIComponent(). Tiếp theo, hàm chia chuỗi cookie thành các phần riêng lẻ bằng cách sử dụng phương thức split()

4. Sau đó, nó lặp qua từng phần của chuỗi cookie và kiểm tra xem phần đó có chứa tên cookie không. Nếu có, hàm trả về giá trị của cookie. Nếu không tìm thấy tên cookie, hàm trả về không xác định

Bằng cách sử dụng tài liệu. cookie, chúng tôi có thể nhận danh sách tất cả các cookie được liên kết với trang hiện tại. Danh sách này là một chuỗi các cặp tên-giá trị, được phân tách bằng dấu chấm phẩy. Để lấy giá trị của một cookie cụ thể, chúng ta có thể sử dụng phương thức split() để chia chuỗi thành một mảng gồm các cặp tên-giá trị, sau đó sử dụng phương thức indexOf() để tìm tên mà chúng ta đang tìm kiếm

Nếu bạn không muốn sử dụng vòng lặp For trong hàm get_cookie() thì bạn có thể sử dụng đoạn mã dưới đây

function get_cookie(cookie_name) {
  const value = "; " + document.cookie;
  const parts = value.split("; " + cookie_name + "=");
  if (parts.length === 2) return parts.pop().split(";").shift();
}

hướng dẫn

1. Mã này định nghĩa một chức năng để lấy một cookie cụ thể từ tài liệu

2. Biến giá trị được đặt thành một chuỗi chứa tất cả các cookie từ tài liệu

3. Biến bộ phận được đặt thành một mảng chứa hai phần, phần đầu tiên là tên cookie và phần thứ hai là giá trị cookie

4. Nếu mảng bộ phận có hai phần, thì giá trị cookie được trả về. Mặt khác, không xác định được trả lại

cookie_name là tham số chuỗi sẽ được chuyển đến hàm get_cookie() để lấy giá trị cookie

Ví dụ: nếu bạn có một cookie có tên uuid trên trang web của mình và bạn muốn truy cập giá trị của nó bằng các chức năng trên thì bạn có thể sử dụng mã bên dưới để lấy giá trị cookie

var uuid_value = get_cookie("uuid");

Hàm trên sẽ trả về undefined nếu cookie không tồn tại và trả về giá trị cookie nếu tồn tại

Giải thích chức năng. Lấy tên cookie làm tham số (cname). Tạo một biến (tên) với văn bản cần tìm (cname + "="). Chia tài liệu. cookie trên dấu chấm phẩy thành một mảng gọi là ca (ca = decodedCookie. tách ra(';')). Lặp qua mảng ca (i = 0; i < ca. chiều dài; .
Chuỗi cookie được mã hóa tự động khi gửi từ máy chủ đến trình duyệt. Do đó, nó cần được giải mã trước khi có thể truy xuất dữ liệu thực tế. Tiếp theo, chuỗi đã giải mã được chia thành một mảng để lấy tất cả các cặp tên-giá trị cookie
Đặt cookie . cookie = "key1=value1;key2=value2;expires=date"; . Nếu bạn cung cấp thuộc tính này với ngày hoặc giờ hợp lệ, thì cookie sẽ hết hạn vào một ngày hoặc giờ nhất định và sau đó, giá trị của cookie sẽ không thể truy cập được
Đối với mỗi cookie, chia cookie thành “=” bằng cách sử dụng. split() và truy cập Tên và Giá trị từ cookie . Phương thức này thực hiện tương tự như phương thức trước đó và trả về các cookie dưới dạng một đối tượng.