Istilah cookie HTTP diciptakan dari kue keberuntungan. Kue keberuntungan sudah ada sejak abad ke-19 di Kyoto Jepang. Di dalam cookie ini tertanam pesan khusus. Lou Montulli seorang pengembang web menggunakan ide ini serta metode yang digunakan oleh sistem Unix untuk mengirim file data kecil dari satu program ke program lainnya tanpa perubahan untuk menciptakan cookie HTTP.

Dalam tutorial ini, kita akan menjelajahi cookie HTTP menggunakan JavaScript dan bagaimana saya menjalankan permainan mouse, mencoba menyetel dan mengambil cookie.

Pernyataan masalah

Saya mendapat permintaan dengan fungsi panggilan balik yang berisi file accessToken. Selanjutnya, saya ingin mengambil informasi pengguna, menggunakan yang accessTokendihasilkan, yang akan dilakukan dengan permintaan pengambilan.

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

Solusi Biskuit Vanila

Solusi pertama yang muncul di benak saya adalah menyimpan nilai sebagai cookie. Dengan cara ini, kita hanya perlu mengambil nilai cookie kapan pun kita membutuhkannya.

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

let userinfo = document.cookie

Ini menjadi masalah besar karena saya harus mengambil cookie terdaftar dari halaman lain. Fungsi muat ulang jendela dapat memperbaikinya jika saya membuat dengan JavaScript vanilla.

window.location.reload()

Cookie Bereaksi Solusi

Dalam pencarian saya untuk menemukan solusi, saya menemukan pustaka cookie R eact yang sempurna . Mengikuti instruksi, saya sampai pada ini:

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

Bereaksi Negara untuk Penyelamatan

Implementasi alur desain melibatkan pengambilan info pengguna, menyimpannya, dan menavigasi ke halaman baru dengan info yang disimpan. Dengan React useNavigate, kita dapat menyimpan informasi pengguna dalam keadaan saat bernavigasi.

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

Saya berhasil mengakhiri pengejaran kucing dan tikus menggunakan status React. Pada artikel ini, kami menjelajahi cara meneruskan informasi ke seluruh komponen React. Pertama, kami menjelajahi cookie JavaScript vanilla. Selanjutnya, kami menggunakan pustaka cookie React dan terakhir status React.