คำว่าคุกกี้ HTTP นั้นมาจากคุกกี้โชคลาภ คุกกี้เสี่ยงทายย้อนเวลากลับไปในศตวรรษที่ 19 ในเมืองเกียวโต ประเทศญี่ปุ่น ภายในคุกกี้เหล่านี้มีการฝังข้อความพิเศษไว้ Lou Montulliนักพัฒนาเว็บใช้แนวคิดนี้เช่นเดียวกับวิธีที่ระบบ Unix ใช้ในการส่งไฟล์ข้อมูลขนาดเล็กจากโปรแกรมหนึ่งไปยังอีกโปรแกรมหนึ่งโดยไม่มีการเปลี่ยนแปลงเพื่อสร้างคุกกี้ HTTP

ในบทช่วยสอนนี้ เราจะสำรวจคุกกี้ HTTP โดยใช้ JavaScript และวิธีที่ฉันเรียกใช้เกมหนู โดยพยายามตั้งค่าและดึงข้อมูลคุกกี้

คำชี้แจงปัญหา

ฉันมีคำขอรับพร้อมฟังก์ชันการโทรกลับที่มีaccessTokenไฟล์ . ต่อไป ฉันต้องการดึงข้อมูลผู้ใช้ โดยใช้ข้อมูลที่accessTokenสร้างขึ้น ซึ่งจะดำเนินการกับคำขอดึงข้อมูล

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();

โซลูชันคุกกี้วานิลลา

ทางออกแรกที่นึกถึงคือการจัดเก็บค่าเป็นคุกกี้ ด้วยวิธีนี้ เราเพียงต้องดึงค่าคุกกี้ออกมาเมื่อใดก็ตามที่เราต้องการ

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

let userinfo = document.cookie

นี่กลายเป็นปัญหาใหญ่เนื่องจากฉันต้องเรียกคุกกี้ที่ลงทะเบียนแล้วจากหน้าอื่น ฟังก์ชันโหลดหน้าต่างสามารถแก้ไขได้หากฉันสร้างด้วยวานิลลา JavaScript

window.location.reload()

โซลูชันตอบสนองคุกกี้

ในการค้นหาวิธีแก้ปัญหา ฉันพบคลังคุกกี้ R eact ที่สมบูรณ์ แบบ ตามคำแนะนำ ฉันมาถึงสิ่งนี้:

(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>
  );
}

ตอบโต้รัฐเพื่อช่วยเหลือ

การใช้งานโฟลว์การออกแบบเกี่ยวข้องกับการดึงข้อมูลผู้ใช้ จัดเก็บ และนำทางไปยังหน้าใหม่ด้วยข้อมูลที่บันทึกไว้ ด้วยReact useNavigateเราสามารถจัดเก็บข้อมูลผู้ใช้ในสถานะขณะนำทาง

.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;
}

ฉันยุติการไล่ตามแมวและหนูได้สำเร็จโดยใช้สถานะการตอบสนอง ในบทความนี้ เราได้สำรวจวิธีการส่งข้อมูลผ่านส่วนประกอบ React ก่อนอื่น เราสำรวจคุกกี้วานิลลาจาวาสคริปต์ ต่อไป เราใช้ไลบรารีคุกกี้ React และสถานะ React ในที่สุด