Thuật ngữ HTTP cookie được đặt ra từ các cookie may mắn. Bánh quy may mắn đã có từ thế kỷ 19 ở Kyoto Nhật Bản. Bên trong các cookie này được nhúng các thông báo đặc biệt. Lou Montulli, một nhà phát triển web đã sử dụng ý tưởng này cũng như phương pháp được các hệ thống Unix sử dụng để gửi tệp dữ liệu nhỏ từ chương trình này sang chương trình khác mà không thay đổi để phát minh ra cookie HTTP.

Trong hướng dẫn này, chúng ta sẽ khám phá cookie HTTP bằng JavaScript và cách tôi chạy trò chơi bắt chuột, cố gắng thiết lập và truy xuất cookie.

Báo cáo vấn đề

Tôi có yêu cầu nhận với chức năng gọi lại có chứa tệp accessToken. Tiếp theo, tôi muốn truy xuất thông tin người dùng bằng cách sử dụng thông tin accessTokenđã tạo, việc này sẽ được thực hiện với yêu cầu tìm nạp.

callback: (response) => {
      // run fetch request to get user info
      let value = fetch(url + response.access_token, {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
        },
      })
        .then(value => value.json())
        .then(text => console.log(text))
    }

.then(text => return text)

function callme() {
  callback: (response) => {
      ...
    }
}

let userinfo = callme();

Giải pháp bánh quy vani

Giải pháp đầu tiên tôi nghĩ đến là lưu trữ giá trị dưới dạng cookie. Bằng cách này, chúng tôi chỉ cần truy xuất giá trị cookie bất cứ khi nào chúng tôi cần.

.then(text => document.cookie = "userinfo=" + JSON.stringify({ username: text.name, userimg: text.picture }))

let userinfo = document.cookie

Điều này đã trở thành một vấn đề lớn vì tôi cần truy xuất cookie đã đăng ký từ một trang khác. Chức năng tải lại cửa sổ có thể đã sửa lỗi này nếu tôi đang xây dựng bằng vanilla JavaScript.

window.location.reload()

Giải pháp Cookie phản ứng

Trong quá trình tìm kiếm giải pháp, tôi đã tìm thấy thư viện cookie R eact hoàn hảo . Làm theo hướng dẫn, tôi đã đến đây:

(Pageone.jsx)

import React from "react";
import { useCookies } from "react-cookie";

export default function Pageone() {
  const [setCookie] = useCookies(["user"]);

  function myCookie() {
    setCookie("user", "blah", {
      path: "/"
    });
  }
  return (
    <button onClick={myCookie()}>Set Cookie</button>
  );
}
(Pagetwo.jsx)

import React from "react";
import { useCookies } from "react-cookie";

export default function Pagetwo() {
  const [cookies] = useCookies(["user"]);

  return (
    <div className="Pagetwo">
      <h1>React cookies</h1>
       {cookies.user && <p>{cookies.user}</p>}
      <button onClick={myCookie()}>Set Cookie</button>
    </div>
  );
}

Trạng thái phản ứng để giải cứu

Việc triển khai luồng thiết kế liên quan đến việc truy xuất thông tin người dùng, lưu trữ chúng và điều hướng đến một trang mới với thông tin đã lưu. Với React useNavigate, chúng tôi có thể lưu trữ thông tin người dùng ở trạng thái trong khi điều hướng.

.then(text => navigate('/', { state:{username:text.name, userimg:text.picture}}))

import { useLocation } from 'react-router-dom';

const Sidebar = () => {
  const location = useLocation();
  // retrieve userimg
  let userimg = location.state.userimg;
  // retrieve username
  let username = location.state.username;
}

Tôi đã kết thúc thành công màn rượt đuổi mèo vờn chuột bằng trạng thái React. Trong bài viết này, chúng ta đã khám phá cách truyền thông tin qua các thành phần React. Đầu tiên, chúng tôi đã khám phá cookie vanilla JavaScript. Tiếp theo, chúng tôi đã sử dụng thư viện cookie React và cuối cùng là trạng thái React.