title: Save API token to local storage ReactJS
body: <p>I want to know how to save token to the local storage. I am registering and the relevant token is being generated which I have to save to the local storage. And further when I open login page there I have to fetch that to check it as well.</p>
  
  <p>My code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Link } from 'react-router'
  class Register extends Component {
    constructor(props) {
      super(props);
      this.state = {
        inputfirstname: '',
        inputlastname: '' ,
        inputemail: '' ,
        inputpassword: ''
      };
  
      this.handleFirstName = this.handleFirstName.bind(this);
      this.handleLastName = this.handleLastName.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleEmail = this.handleEmail.bind(this);
      this.handlePassword = this.handlePassword.bind(this);
    }
    static contextTypes = {
      router: React.PropTypes.object.isRequired
    }
    handleFirstName(event) {
      this.setState({inputfirstname: event.target.value});
    }
    handleLastName(event) {
      this.setState({inputlastname: event.target.value});
    }
    handleEmail(event) {
      this.setState({inputemail: event.target.value});
    }
    handlePassword(event) {
      this.setState({inputpassword: event.target.value});
    }
    handleSubmit(event) {
      fetch("http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/accounts/" , {
        method: 'post',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          firstName: this.state.inputfirstname,
          lastName: this.state.inputlastname,
          email:this.state.inputemail,
          password: this.state.inputpassword
        })
      }).then(function(response){
        if(response.ok) {
          console.log(response)
          return response;
        }
        throw new Error('Network response was not ok.');
      }).then(function(data) { 
        console.log(data);
      }).catch(function(error) {
        console.log('There has been a problem with your fetch operation: ' + error);
      });
      alert('Submitted: ' + " " + this.state.inputfirstname +  " " + this.state.inputlastname + " " + this.state.inputemail + " " + this.state.inputpassword);
      event.preventDefault();
      this.context.router.push('/dashboard');
    }
    render() {
      return (
        &lt;div className="container"&gt;
          &lt;div className="row justify-content-center"&gt;
            &lt;div className="col-md-6"&gt;
              &lt;div className="card mx-2"&gt;
                &lt;div className="card-block p-2"&gt;
                  &lt;center&gt;
                  &lt;img src="./img/logos.png"/&gt;&lt;/center&gt;
                  &lt;p className="text-muted"&gt;Create your account&lt;/p&gt;
                  &lt;div className="input-group mb-1"&gt;
                    &lt;span className="input-group-addon"&gt;&lt;i className="icon-user"&gt;&lt;/i&gt;&lt;/span&gt;
                    &lt;input type="text" 
                    className="form-control" 
                    placeholder="First name"
                    value={this.state.inputfirstname} onChange={this.handleFirstName}
                    /&gt;
                  &lt;/div&gt;
                  &lt;div className="input-group mb-1"&gt;
                    &lt;span className="input-group-addon"&gt;&lt;i className="icon-user"&gt;&lt;/i&gt;&lt;/span&gt;
                    &lt;input type="text" 
                    className="form-control" 
                    placeholder="Last name"
                    value={this.state.inputlastname} onChange={this.handleLastName}
                    /&gt;
                  &lt;/div&gt;
                  &lt;div className="input-group mb-1"&gt;
                    &lt;span className="input-group-addon"&gt;@&lt;/span&gt;
                    &lt;input type="text" 
                    className="form-control"
                     placeholder="Email"
                     value={this.state.inputemail} onChange={this.handleEmail}
                     /&gt;
                  &lt;/div&gt;
                  &lt;div className="input-group mb-1"&gt;
                    &lt;span className="input-group-addon"&gt;&lt;i className="icon-lock"&gt;&lt;/i&gt;&lt;/span&gt;
                    &lt;input type="password" 
                    className="form-control" 
                    placeholder="Password"
                    value={this.state.inputpassword} onChange={this.handlePassword}
                    /&gt;
                  &lt;/div&gt;
                  &lt;button type="button" onClick={this.handleSubmit.bind(this)} className="btn btn-block btn-success"&gt;Create Account&lt;/button&gt;
  
                  &lt;center&gt;&lt;Link to={'/pages/login'} style={{ width: 10 + '%' }} className="nav-link" activeClassName="active"&gt;&lt;center&gt;Login&lt;/center&gt;&lt;/Link&gt;
  &lt;/center&gt;
                &lt;/div&gt;
                &lt;div className="card-footer p-2"&gt;
                  &lt;div className="row"&gt;
                    &lt;div className="col-6"&gt;
                      &lt;button className="btn btn-block btn-facebook" type="button"&gt;&lt;span&gt;facebook&lt;/span&gt;&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div className="col-6"&gt;
                      &lt;button className="btn btn-block btn-twitter" type="button"&gt;&lt;span&gt;twitter&lt;/span&gt;&lt;/button&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  export default Register;
  </code></pre>