How can I set a cookie in react

Question

Orginally  I use the following ajax to set 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    gt        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          Now  I want to set the cookie using the servlet s adding cookie function  But I don t know how to achieve my purpose   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     In order to extend the cookie timelimit  what should I write in the react side to receive the cookie s session time

User · Answer

You can use default javascript cookies set method. this working perfect.

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

call java scripts funtion in react method as below,

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

and you can use below way to view cookies.

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

please refer below document for more information - URL

User · Answer

Little update  There is a hook available for react-cookie  1  First of all  install the dependency  just for a note   yarn add react-cookie   or   npm install react-cookie   2  My usage example      SignInComponent js import   useCookies   from  react-cookie   const SignInComponent        gt             const  cookies  setCookie    useCookies   access token    refresh token     async function onSubmit values        const response   await getOauthResponse values        let expires   new Date       expires setTime expires getTime      response data expires in   1000       setCookie  access token   response data access token    path        expires       setCookie  refresh token   response data refresh token   path       expires                     next goes my sign-in form      Hope it is helpful   Suggestions to improve the example above are very appreciated

User · Answer

A very simple solution is using the sfcookies package   You just have to install it using npm for example  npm install sfcookies --save  Then you import on the file   import   bake cookie  read cookie  delete cookie   from  sfcookies     create a cookie key   const cookie key    namedOFCookie     on your submit function  you create the cookie by saving data on it just like this   bake cookie cookie key   test      to delete it just do  delete cookie cookie key     and to read it   read cookie cookie key    Simple and easy to use

User · Answer

Use vanilla js  example  document cookie    referral key hello max-age 604800 domain example com    Read more at  https   developer mozilla org en-US docs Web API Document cookie

User · Answer

It appears that the functionality previously present in the react-cookie npm package has been moved to universal-cookie  The relevant example from the universal-cookie repository now is   import Cookies from  universal-cookie   const cookies   new Cookies    cookies set  myCat    Pacman     path          console log cookies get  myCat        Pacman

User · Answer

By default  when you fetch your URL  React native sets the cookie  To see cookies and make sure that you can use the https   www npmjs com package react-native-cookie package  I used to be very satisfied with it  Of course  Fetch does this when it does credentials   quot include quot     or  quot some-origin quot   Well  but how to use it --- after installation this package ---- to get cookies  import Cookie from  react-native-cookie    Cookie get  url   then  cookie    gt       console log cookie        to set cookies  Cookie set  url    name of cookies    value  of cookies     only this But if you want a few  you can do it 1- as nested  Cookie set  url    name of cookies 1    value  of cookies 1            then      gt                Cookie set  url    name of cookies 2    value  of cookies 2                then      gt                                                   2- as back together 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          Now  if you want to make sure the cookies are set up  you can get it again to make sure  Cookie get  url   then  cookie    gt      console log cookie

User · Answer

I set cookies in React using the react-cookie library  it has options you can pass in options to set expiration time   Check it out here  An example of its use for your case   import cookie from  react-cookie    setCookie     gt      let d   new Date      d setTime d getTime      minutes 60 1000       cookie set  onboarded   true   path       expires  d

[reactjs] How can I set a cookie in react?

Examples related to reactjs

Examples related to cookies