Localhost storage

Question

So the below code is how I'm trying to get localStorage to persist a user's state beyond a page refresh.

This essentially works on the homepage, wherein whenever I refresh I see that the localStorage 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 localStorage

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!


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(()=>{
    localStorage.setItem('user', JSON.stringify(user));
  }, []);
  React.useEffect(()=>{
    const data = localStorage.getItem('user');
    if(data){
      setUser(JSON.parse(data));
    }

  }, []);





  return(
    <BrowserRouter>
      <InfoContext.Provider value={{replies, setReplies, artists, setArtists, messages, setMessages, songs, setSongs,posts, setPosts, user, setUser, accesstoken, setAccesToken, refreshtoken, setRefreshToken}}>
        <Route exact path="/signup/:id/:access_token" render={()=><Signup />} />
        <Route exact path="/" render={()=><Login />} />

        <Route exact path="/home/:id/:access_token/:refresh_token"  render = {()=> <Homepage ></Homepage>} />


        <Route exact path="/artist/:artistid"  render = {()=> <ArtistPage ></ArtistPage>} />

        <Route exact path="/map" render={()=><MapLeaflet />} />
      </InfoContext.Provider>
    </BrowserRouter>
  );
}

export default App;

Could you clean up your code sample a bit? What you've posted is not valid JS. — lawrence-witt, Jun 18 '20 at 21:16
We're missing part of your logic here. If you're losing state when you route away from a page, it's likely that you need a function in a `useEffect()` to return the user state to local storage before unmounting. That's just a guess though. Can you show the rest of your code? — technicallynick, Jun 18 '20 at 21:16
Updated! So when I refresh /homepage, the localstorage persists, but when I refresh /artist, the localstorage doesn't persist. — Karan Bhasin, Jun 18 '20 at 21:52

score 0 · Accepted Answer · answered Jun 22 '20 at 11:46

0

The issue was I was not checking if user exists before setting it as the user object in localstorage! You also need to add user in the brackets for when the useEffect should run.

answered Jun 22 '20 at 11:46

Karan Bhasin

237
3
13

Localhost storage

1 Answers1