Bạn có thể truy cập cookie bằng JavaScript không?

Sau khi máy chủ web gửi một trang web tới trình duyệt, kết nối sẽ tắt và tất cả thông tin do máy chủ lưu giữ sẽ bị mất. Điều này có nghĩa là thông tin không thể dễ dàng được duy trì giữa các yêu cầu, vì ở mỗi yêu cầu mới, máy chủ sẽ không có bất kỳ ngữ cảnh cục bộ nào đối với người dùng. Cookie khắc phục trở ngại này bằng cách lưu trữ thông tin cần thiết trên máy tính của người dùng dưới dạng chuỗi tên=giá trị

Cookies thường được sử dụng để lưu trữ tên người dùng, tùy chọn, mật khẩu truy cập, v.v.

Ghi chú. Bạn phải luôn ghi nhớ vấn đề bảo mật khi lưu trữ thông tin nhạy cảm như mật khẩu. Thông tin được lưu trữ trong cookie được lưu trữ dưới dạng chuỗi đơn giản và có thể dễ dàng khám phá với kiến ​​thức kỹ thuật tối thiểu

Để tìm hiểu thêm về cookie, hãy xem liên kết này

Nhận cookie

Lấy tất cả cookie từ máy của người dùng rất đơn giản. Chỉ cần gọi tài liệu. cookie để lấy giá trị hiện tại của tất cả các cookie. Sau đó, bạn có thể lưu trữ giá trị này trong một biến để thao tác thêm

document.cookie = "username=Debra White; path=/";
document.cookie = "userId=wjgye264s; path=/";
let cookies = document.cookie;
console.log(cookies); // expected output: username=Debra White; userId=wjgye264s

Trong đoạn mã trên, hai dòng mã đầu tiên đặt giá trị của hai cookie khác nhau – tên người dùng và userId. Dòng thứ ba truy xuất cả hai cookie và lưu trữ nó vào một biến có tên là cookie

Để tìm hiểu thêm về cookie và đặt cookie, hãy xem liên kết này

Nhận một cái bánh quy

Lấy một cookie cụ thể phức tạp hơn một chút so với lấy tất cả các cookie, nhưng đó không phải là vấn đề lớn

Nếu bạn có tên của cookie, tất cả những gì bạn cần là một chức năng lặp qua tất cả các cookie của người dùng và tìm cookie cụ thể được yêu cầu. Mẫu mã bên dưới định nghĩa một hàm, getCookie(), lấy tên của cookie và trả về giá trị của cookie đó

function getCookie(cName) {
  const name = cName + "=";
  const cDecoded = decodeURIComponent(document.cookie); //to be careful
  const cArr = cDecoded.split('; ');
  let res;
  cArr.forEach(val => {
    if (val.indexOf(name) === 0) res = val.substring(name.length);
  })
  return res
}

Khám phá hàm getCookie() theo dòng

Hàm getCookie lấy tên của cookie làm tham số, sau đó thực hiện các bước sau

1. Dòng đầu tiên gán tên cookie được yêu cầu cho một tên biến cố định. Nó thêm một dấu bằng vào cuối tên. Ví dụ: chuyển vào giá trị cookie 'tên người dùng' sẽ dẫn đến 'tên người dùng =' được lưu trữ trong biến tên
2. Dòng tiếp theo truy xuất tất cả các cookie bằng tài liệu. cookie, sau đó áp dụng decodeURIComponent() cho kết quả. Chức năng này “làm sạch” chuỗi khỏi “dấu vết mã hóa” có thể đã được bao gồm trong nội dung cookie. Bạn có thể đã nhìn thấy những dấu vết mã hóa này trước đây, chúng trông giống như thế này. %20%24tên người dùng%20
3. Như đã giải thích trong phần trước, tài liệu. cookie trả về kết quả dưới dạng một chuỗi chứa tất cả các giá trị cookie được phân tách bằng dấu chấm phẩy (;). Ở đây tôi đã sử dụng phương thức split(), yêu cầu nó tách các giá trị của chuỗi ra khi nó gặp dấu chấm phẩy theo sau là khoảng trống. Kết quả sẽ là một mảng các chuỗi cookie
4. Hai dòng sau xác định biến trả về, res và gọi phương thức forEach() trên mảng cookie thu được ở dòng 4 (cArr). forEach() lặp qua một mảng, thực thi hàm gọi lại một lần cho mỗi phần tử mảng. Trong ví dụ trên, nếu giá trị được lưu trong tên biến xuất hiện ở đầu chuỗi (i. e. tại chỉ số 0), khối bên trong gán nội dung của cookie (i. e. giá trị sau dấu “=”) vào biến res. Độ dài giá trị lớn hơn chỉ số một. Điều này cho phép chúng tôi cắt bỏ cả tên chuỗi đầy đủ của cookie và dấu đẳng thức ở cuối bằng cách bắt đầu cắt tại chỉ mục = tên. chiều dài. Để cắt xén, tôi đã sử dụng phương thức substring(), phương thức này tạo ra một chuỗi con có độ dài đã chỉ định từ chuỗi đầu vào ban đầu
5. Nếu phương thức forEach() không thể tìm thấy cookie được yêu cầu, giá trị 'không xác định' sẽ được trả về

Hãy nhớ rằng trong nhiều trường hợp, làm việc với cookie sẽ bắt đầu bằng việc tìm nạp giá trị của cookie, sau đó yêu cầu thông tin từ người dùng nếu không tìm thấy cookie được yêu cầu. Kết quả cuối cùng của đầu vào của người dùng sẽ được lưu trữ trở lại cookie của người dùng. Để tìm hiểu thêm về cookie và đặt cookie, hãy truy cập liên kết này

Trong bài viết này, chúng ta sẽ biết cách lấy danh sách tất cả các cookie cho trang hiện tại trong Javascript, cùng với việc hiểu cách triển khai chúng thông qua các ví dụ. Nhiệm vụ là lấy các cookie được lưu trữ trong tên miền hiện tại (Chúng tôi không thể lấy tất cả các cookie vì lý do bảo mật). Có hai phương pháp để giải quyết vấn đề này được thảo luận dưới đây

Cách tiếp cận 1

• Truy cập cookie bằng tài liệu. bánh quy
• Sử dụng. split() để tách chúng trên “;”
• Duyệt qua mảng cookie
• Nối tất cả các cookie từng cái một trong một chuỗi để in

Thí dụ. Ví dụ này thực hiện cách tiếp cận trên

HTML

<html>

<head>

    <<0_______3_______1<0>

    <<6 <7<8

<9>

    html2_______3_______6>

html2_______8_______>

<>0 >1<8>3>

    <>7 >1_______3_______8_______6_______0 1

 2 3

    html2_______5_______7>

    <<0 <1_______3_______8_______3_______3 >1<8<6<7<0>

Làm cách nào bạn có thể truy cập cookie từ JavaScript?

JavaScript có thể đọc cookie không?