Cách lấy tất cả cookie trong React

Khi xử lý dữ liệu lâu dài trong ứng dụng React, đôi khi chúng tôi muốn xóa hoàn toàn tất cả thông tin cookie khỏi trình duyệt. Điều này giúp xóa mọi dữ liệu có thể ảnh hưởng đến một số chức năng trong giao diện người dùng

Vì vậy, làm cách nào bạn có thể xóa tất cả cookie trong React. js? . js bằng cách sử dụng các phương pháp sau

• Bằng cách sử dụng cookies.remove[] trong thư viện cookie phản ứng
• Bằng cách truy cậpdocument.cookie trong DOM

Hãy khám phá cả hai tùy chọn này

Sử dụng cookie phản ứng

Gói cookie phản ứng cung cấp một hệ thống mạnh mẽ để xử lý việc quản lý cookie. Chúng ta có thể tận dụng nó. Phương pháp remove[] để loại bỏ cookie hiện tại trong trình duyệt

cookies.remove["user"];

Để đảm bảo rằng các cookie sẽ bị xóa sau khi trình duyệt tắt, chúng ta có thể đặt trình xử lý sự kiện sau vào componentDidMount

componentDidMount[] {
  window.addEventListener["beforeunload", [e] => {
    e.preventDefault[];
    cookies.remove["user"];
  }];
}

Sự kiện beforeunload  được kích hoạt khi cửa sổ, tài liệu và các tài nguyên của nó sắp được dỡ xuống.  

Ngoài ra, điều này cũng có thể được thực hiện bằng cách sử dụng hook React mới

const [cookies, setCookie, removeCookie] = useCookies[["user"]];
removeCookies[];

Sử dụng các phương thức DOM gốc

Sử dụng document.cookie chúng tôi có thể duyệt qua tất cả các cookie hiện tại và xóa chúng như vậy

document.cookie.split[";"].forEach[[c] => {
  document.cookie = c
    .replace[/^ +/, ""]
    .replace[/=.*/, "=;expires=" + new Date[].toUTCString[] + ";path=/"];
}];

Vì vậy, những gì đang xảy ra ở đây?

• Chúng tôi chia các cookie theo

  componentDidMount[] {
    window.addEventListener["beforeunload", [e] => {
      e.preventDefault[];
      cookies.remove["user"];
    }];
  }

  0 để tạo một mảng
• Chúng tôi lặp lại mảng cookie để thay thế nội dung của nó bằng ngày hết hạn của ngày hôm nay [

  componentDidMount[] {
    window.addEventListener["beforeunload", [e] => {
      e.preventDefault[];
      cookies.remove["user"];
    }];
  }

  1]
• Việc có ngày và giờ của ngày hôm nay về cơ bản sẽ làm mất hiệu lực của cookie và cookie sẽ bị xóa khỏi trình duyệt

Nếu bạn đang tìm kiếm vị trí kỹ sư phần mềm mơ ước của mình, tôi khuyên bạn nên đăng ký tư cách thành viên toàn quyền truy cập của Mosh để cải thiện kỹ năng của bạn với tư cách là nhà phát triển React

Lưu thông tin vào cookie hay local storage vẫn là chức năng quan trọng khi phát triển website. Do đó, chúng ta sẽ tìm hiểu cách đặt cookie, đọc và xóa cookie trong React bằng cách sử dụng plugin. Phiên bản Javascript có thể tham khảo tại đây

Sử dụng cookie

Cookie là một loại cơ chế lưu trữ rất phổ biến cho bất kỳ trang web nào để lưu trữ thông tin cần tồn tại ngay cả khi người dùng khởi động lại trình duyệt của họ hoặc sau khi trình duyệt gặp sự cố. Do đó, những thông tin này được coi là trạng thái

Dưới đây là một số thuộc tính phổ biến của cookie [Có thể khác nhau tùy theo trình duyệt]

• Kích thước tối đa 4KB hoặc 4096 Byte cho mỗi cookie
• Tối đa 20 cookie cho mỗi miền

Ví dụ: lưu trữ thông tin người dùng để người dùng không cần đăng nhập lại ngay cả khi họ khởi động lại ứng dụng

Cài đặt

Để thực hiện các thao tác cookie một cách dễ dàng trong phản ứng, chúng tôi sẽ sử dụng một plugin có tên là cookie phản ứng thông qua npm

// Install plugin into your application
npm i react-cookie

Đặt cookie

Để bắt đầu đặt cookie, trước tiên, chúng tôi sẽ cần nhập CookieProvider và bọc nó quanh thành phần Ứng dụng chính

Để đặt cookie, chúng tôi cũng sẽ cần nhập useCookies. Áp dụng useCookies cho một trạng thái trong khi gán cho nó một tên cookie sẽ được lưu trữ trong trình duyệt

// .. Some other imports
import { CookiesProvider } from 'react-cookie';
import { useCookies } from 'react-cookie';

const App = [] => {
  const [cookie, setCookie] = useCookies[['valueName']];

  const handleChange = [data] => {
    setCookie['valueName', data, { path: '/' }];
  }
};

class App extends Component {
   render[] {
     return [];
   }
 }

ReactDOM.render[
  
    
  , 
  document.getElementById['root']
];

Đọc Cookie

Vì chúng tôi đã chỉ định trạng thái cho cookie, nên chúng tôi có thể đọc cookie từ giá trị đối tượng của trạng thái

________số 8_______

Xóa Cookie

Để xóa cookie, việc chúng ta phải làm là cập nhật cookie để có ngày hết hạn so với ngày cũ. Nhưng trong react-cookie, chúng ta chỉ phải khai báo một hàm mới trong bộ khai báo và thực hiện để loại bỏ;

Hãy xem ví dụ dưới đây

const [cookie, setCookie, removeCookie] = useCookies[['valueName']];

// Remove cookie
removeCookie['valueName'];

Phần kết luận

Với plugin react-cookie, các nhà phát triển phản ứng sẽ có thời gian dễ dàng hơn để làm việc với cookie trong môi trường giống như phản ứng thay vì quay lại phương thức javascript mặc định