HTTP çerezleri terimi, fal çerezlerinden türetilmiştir. Fal kurabiyeleri, Kyoto Japonya'da 19. yüzyıla kadar uzanıyor. Bu tanımlama bilgilerinin içine özel mesajlar yerleştirilmiştir. Bir web geliştiricisi olan Lou Montulli , HTTP tanımlama bilgilerini icat etmek için bu fikri ve Unix sistemlerinin küçük veri dosyalarını bir programdan diğerine değişiklik yapmadan göndermek için kullandığı yöntemi kullandı.

Bu eğitimde, JavaScript kullanarak HTTP çerezlerini ve çerezleri ayarlamaya ve almaya çalışırken nasıl bir fare oyunu oynadığımı keşfedeceğiz.

Sorun bildirimi

içeren bir geri arama işlevine sahip bir alma isteğim var accessToken. accessTokenDaha sonra, bir getirme isteği ile yapılacak oluşturulanı kullanarak kullanıcı bilgilerini almak istiyorum .

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

Çözüm Vanilyalı Kurabiye

Aklıma gelen ilk çözüm, değeri çerez olarak saklamak. Bu şekilde, ihtiyacımız olduğunda çerez değerini almamız yeterlidir.

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

let userinfo = document.cookie

Kayıtlı çerezi farklı bir sayfadan almam gerektiğinden bu büyük bir sorun haline geldi. Vanilla JavaScript ile oluşturuyor olsaydım, pencere yeniden yükleme işlevi bunu düzeltebilirdi.

window.location.reload()

Çözüm Tepki Çerezleri

Bir çözüm bulma arayışımda, mükemmel R eact cookie kitaplığını buldum . Talimatın ardından şuna ulaştım:

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

Durumu Kurtarmaya Tepki Göster

Tasarım akışı uygulaması, kullanıcı bilgilerinin alınmasını, saklanmasını ve kaydedilen bilgilerle yeni bir sayfaya gidilmesini içerir. ile React useNavigate, navigasyon sırasında kullanıcı bilgilerini durumda saklayabiliriz.

.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 durumunu kullanarak kedi ve fare kovalamacasını başarıyla sonlandırdım. Bu makalede, bilgilerin React bileşenlerine nasıl iletileceğini araştırdık. İlk olarak, vanilya JavaScript çerezlerini inceledik. Ardından, React çerez kitaplığını ve son olarak React durumunu kullandık.