title: localstorage.getitem('key') sometimes returns null - in a react app
body: <p>this is a very weird problem! I'm trying to build a login form which sets a JWT token in <code>localstorage</code>. Other forms then use that token to post requests. I can see the token in my <code>console.log</code> just fine, but sometimes (like 3 out of 5 times), when I am setting <code>localstorage.getitem('idToken')</code>, it shows as null. This behavior most noticeably happens when I remove the <code>console.log(idToken)</code> from my <code>loginUser()</code> function (code in actions.js file - given below). What am I doing wrong? my app is built using React/Redux. </p>
  
  <p><strong>action.js</strong></p>
  
  <pre><code>export function loginUser(creds) {
  
  const data = querystring.stringify({_username: creds.username, _password: creds.password});
  
  let config = {
      method: 'POST',
      headers: { 'Content-Type':'application/x-www-form-urlencoded' },
      body: data
  };
  
  return dispatch =&gt; {
      // We dispatch requestLogin to kickoff the call to the API
      dispatch(requestLogin(creds));
  
      return fetch(BASE_URL+'login_check', config)
          .then(response =&gt;
              response.json().then(user =&gt; ({ user, response }))
          ).then(({ user, response }) =&gt;  {
              if (!response.ok) {
                  // If there was a problem, we want to
                  // dispatch the error condition
                  dispatch(loginError(user.message));
                  return Promise.reject(user)
              } else {
  
                  localStorage.setItem('idToken', user.token);
                  let token = localStorage.getItem('idToken')
                  console.log(token);
                  // if I remove this log, my token is returned as null during post. 
                  dispatch(receiveLogin(user));
              }
          }).catch(err =&gt; console.log("Error: ", err))
  }
  }
  </code></pre>
  
  <p><strong>here's my POST request:</strong> </p>
  
  <pre><code>import axios  from 'axios';
  import {BASE_URL} from './middleware/api';
  import {reset} from 'redux-form';
  
   let token = localStorage.getItem('idToken');
   const AuthStr = 'Bearer '.concat(token);
  
  let headers ={
  headers: { 'Content-Type':'application/json','Authorization' : AuthStr }
  };
  
  export default (async function showResults(values, dispatch) {
  console.log(AuthStr);
  axios.post(BASE_URL + 'human/new', values, headers)
      .then(function (response) {
          console.log(response);          
          alert("Your submit was successful");
          //dispatch(reset('wizard'));
      }).catch(function (error) {
          console.log(error.response);
          alert(error.response.statusText);
      });
   });
  </code></pre>
  
  <p><strong>This <code>GET</code> request works everytime, BTW:</strong> </p>
  
  <pre><code>getHouses = (e) =&gt;  {
      let token = localStorage.getItem('idToken') || null;
      const AuthStr = 'Bearer '.concat(token);
      axios.get(BASE_URL + 'household/list', { headers: { Authorization: AuthStr } }).then((response) =&gt;
          {
              let myData = response.data;
  
              let list = [];
              let key =[];
              for (let i = 0; i &lt; myData._embedded.length; i++) {
                  let embedded = myData._embedded[i];
                  list.push(embedded.friendlyName);
                  key.push(embedded.id);
              }
  
              this.setState({data: list, key: key});
  
          })
          .catch((error) =&gt; {
              console.log('error' + error);
          });
  }
  </code></pre>
  
  <p>I'm at my wit's end! Please help! </p>