title: Localhost storage
body: <p>So the below code is how I'm trying to get <code>localStorage</code> to persist a user's state beyond a page refresh. </p>
  
  <p>This essentially works on the homepage, wherein whenever I refresh I see that the <code>localStorage</code> does indeed persist even with a refresh. However, when I rout somewhere by interacting with the webpage and refresh on that page, I lose the <code>localStorage</code></p>
  
  <p>I am passing the user state (whose setter is setUser) through the react useContext function. Would be interested to hear anybody's thoughts. Thank you!</p>
  
  <pre><code>
  import axios from 'axios'
  import firebase from 'firebase/app';
  import 'firebase/database';
  import React, {useState, useContext, useEffect} from 'react';
  import {Router } from  'react-router-dom'
  import logo from './logo.svg';
  import './App.css';
  import Spotify from 'spotify-web-api-js';
  import Homepage from './components/homepage';
  import Login from './components/login'
  import MapLeaflet from './components/MapLeaflet'
  import {BrowserRouter, Route} from 'react-router-dom'
  import Signup from './components/signup';
  import ArtistPage from './components/artisthomepage'
  import {dbMessages, dbPosts, dbSongs, dbArtists, dbReplies} from './firebase/firebase';
  
  const s = new Spotify();
  
  export const InfoContext = React.createContext();
  function App() {
  
    const [artists, setArtists]=useState("")
    const [messages, setMessages]=useState("")
    const [songs, setSongs]=useState("")
    const [posts, setPosts]=useState("")
    const [replies, setReplies]=useState("")
    const [user, setUser]=useState("")
    const [accesstoken, setAccesToken]=useState("")
    const [refreshtoken, setRefreshToken]=useState("")
  
    React.useEffect(()=&gt;{
      localStorage.setItem('user', JSON.stringify(user));
    }, []);
    React.useEffect(()=&gt;{
      const data = localStorage.getItem('user');
      if(data){
        setUser(JSON.parse(data));
      }
  
    }, []);
  
  
  
  
  
    return(
      &lt;BrowserRouter&gt;
        &lt;InfoContext.Provider value={{replies, setReplies, artists, setArtists, messages, setMessages, songs, setSongs,posts, setPosts, user, setUser, accesstoken, setAccesToken, refreshtoken, setRefreshToken}}&gt;
          &lt;Route exact path="/signup/:id/:access_token" render={()=&gt;&lt;Signup /&gt;} /&gt;
          &lt;Route exact path="/" render={()=&gt;&lt;Login /&gt;} /&gt;
  
          &lt;Route exact path="/home/:id/:access_token/:refresh_token"  render = {()=&gt; &lt;Homepage &gt;&lt;/Homepage&gt;} /&gt;
  
  
          &lt;Route exact path="/artist/:artistid"  render = {()=&gt; &lt;ArtistPage &gt;&lt;/ArtistPage&gt;} /&gt;
  
          &lt;Route exact path="/map" render={()=&gt;&lt;MapLeaflet /&gt;} /&gt;
        &lt;/InfoContext.Provider&gt;
      &lt;/BrowserRouter&gt;
    );
  }
  
  export default App;
  
  
  
  
  </code></pre>