web-dev-qa-db-ja.com

ReactでCookieを設定するにはどうすればよいですか？

元々、私は次のajaxを使用してcookieを設定します。

function setCookieAjax(){
  $.ajax({
    url: `${Web_Servlet}/setCookie`,
    contentType: 'application/x-www-form-urlencoded;charset=utf-8',
    headers: { 'Access-Control-Allow-Origin': '*',
               'username': getCookie("username"),
              'session': getCookie("session")
    },
    type: 'GET',
    success: function(response){
      setCookie("username", response.name, 30);
      setCookie("session", response.session, 30);}
  })
}

function setCookie(cname, cvalue, minutes) {
    var d = new Date();
    d.setTime(d.getTime() + (minutes*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

export const getUserName = (component) => {
    setCookieAjax()
 $.ajax({
    url: `${Web_Servlet}/displayHeaderUserName`,
    contentType: 'application/x-www-form-urlencoded;charset=utf-8',
    headers: { 'Access-Control-Allow-Origin': '*',
                'username': getCookie("username"),
                'session': getCookie("session")
            },
    type: 'GET',
    success: function(response){
        component.setState({
        usernameDisplay: response.message
        })
   }.bind(component)
 })
}

次に、サーブレットのCookieの追加機能を使用してCookieを設定します。しかし、自分の目的を達成する方法がわかりません。

Cookie loginCookie = new Cookie("user",user);  //setting cookie to expiry in 30 mins
        loginCookie.setMaxAge(30*60);
        loginCookie.setDomain("localhost:4480");
        loginCookie.setPath("/");

response.addCookie(loginCookie);

Cookieの制限時間を延長するには、Cookieのセッション時間を受け取るためにリアクション側に何を書く必要がありますか？

reactjscookies
33
OPfan

以前はreact-cookie npmパッケージにあった機能はuniversal-cookieに移動されたようです。 niversal-cookie repository からの関連する例は次のとおりです。

import Cookies from 'universal-cookie';
const cookies = new Cookies();
cookies.set('myCat', 'Pacman', { path: '/' });
console.log(cookies.get('myCat')); // Pacman
79
speckledcarp

反応Cookieライブラリを使用してReactにCookieを設定します。有効期限を設定するオプションで渡すことができるオプションがあります。

それをチェックしてください こちら

あなたのケースでの使用例：

import cookie from "react-cookie";

setCookie() => {
  let d = new Date();
  d.setTime(d.getTime() + (minutes*60*1000));

  cookie.set("onboarded", true, {path: "/", expires: d});
};
9
bdougie

Vanilla jsを使用する例

document.cookie = `referral_key=hello;max-age=604800;domain=example.com`

続きを読む： https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

5
Smakosh

非常に簡単な解決策は、sfcookiesパッケージを使用することです。たとえば、npmを使用してインストールするだけです。npm install sfcookies --save

次に、ファイルをインポートします。

import { bake_cookie, read_cookie, delete_cookie } from 'sfcookies';

cookieキーを作成します。

const cookie_key = 'namedOFCookie';

送信関数で、次のようにデータを保存してCookieを作成します。

bake_cookie(cookie_key, 'test');

削除するには

delete_cookie(cookie_key);

そしてそれを読むには：

read_cookie(cookie_key)

シンプルで使いやすい。

5
Periback

デフォルトでは、fetchyourURL、React nativeはCookieを設定します。

Cookieを表示し、 https://www.npmjs.com/package/react-native-cookie パッケージを使用できることを確認します。以前はとても満足していました。

もちろん、Fetchは彼がそうするときにこれを行います

credentials: "include",// or "some-Origin"

さて、しかし、それを使用する方法????

---このパッケージのインストール後----

クッキーを取得する場合：

import Cookie from 'react-native-cookie';

Cookie.get('url').then((cookie) => {
   console.log(cookie);
});

セットCookieの場合：

Cookie.set('url', 'name of cookies', 'value  of cookies');

これだけ????

しかし、あなたがいくつかしたいなら、あなたはそれを行うことができます

1-ネストされたものとして：

Cookie.set('url', 'name of cookies 1', 'value  of cookies 1')
        .then(() => {
            Cookie.set('url', 'name of cookies 2', 'value  of cookies 2')
            .then(() => {
                ...
            })
        })

2-一緒に戻って

Cookie.set('url', 'name of cookies 1', 'value  of cookies 1');
Cookie.set('url', 'name of cookies 2', 'value  of cookies 2');
Cookie.set('url', 'name of cookies 3', 'value  of cookies 3');
....

Cookieが設定されていることを確認したい場合は、確認のために再度取得できます。

Cookie.get('url').then((cookie) => {
  console.log(cookie);
});
2
Mahdi Bashirpour

デフォルトのJavaScript Cookieのsetメソッドを使用できます。これは完璧に動作します。

createCookieInHour: (cookieName, cookieValue, hourToExpire) => {
    let date = new Date();
    date.setTime(date.getTime()+(hourToExpire*60*60*1000));
    document.cookie = cookieName + " = " + cookieValue + "; expires = " +date.toGMTString();
},

以下のように、reactメソッドでJavaスクリプト関数を呼び出します。

createCookieInHour('cookieName', 'cookieValue', 5);

以下の方法でCookieを表示できます。

let cookie = document.cookie.split(';');
console.log('cookie : ', cookie);

詳細については、以下のドキュメントを参照してください- URL

0
Thilina Sampath