0

I'm persisting a logged in session with React and localStorage functionality:

 axios
    .post(url, data, headers)
    .then(resp => {
      if (resp.data.message === "successfully logged in") {
        setAuthenticated(true);
        setUserID(resp.data.id);
        setSessionUsername(resp.data.username);
        setSessionEmail(resp.data.email);
        setDisplayGreeting(true);
        localStorage.setItem("user", resp.data);
        console.log(resp.data);

enter image description here

when I'm trying to retrieve the JSON object back:

useEffect(() => {
    const loggedInUser = localStorage.getItem("user");
    if (loggedInUser) {
      console.log(loggedInUser);

enter image description here

The output in the console says "Object [object]". What am I doing wrong ?

appdeveloper
  • 61
  • 7

1 Answers1

0

You need to set the "user" data by converting it into String and then you'll have your data in a readable format there in Storage Tab. This will fix your "Object [object]" issue.

The reason is that you cannot store the object data into the localStorage, it needs Strings, Therefore you can convert your object data into a JSON string and then save it.

localStorage.setItem("user", JSON.stringify(resp.data));

for retrieving, parse the JSON and it will work, like this:

const user = JSON.parse(localStorage.getItem("user"))
Riyaz Khan
  • 2,765
  • 2
  • 15
  • 29
  • I'm not sure why did you get downvote but I don't judge. Worked nicely ! – appdeveloper Mar 24 '21 at 08:53
  • @appdeveloper Thanks, I also don't know why they downvoted it. You can upvote it and it will become zero. – Riyaz Khan Mar 24 '21 at 08:54
  • It is probably downvoted because it is a [common duplicate](https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage). And [we should avoid answering those](https://stackoverflow.com/help/duplicates). – Ivar Mar 24 '21 at 09:09
  • @appdeveloper Are they ridiculous, or don't you simply know why those rules are there? The reason why Stack Overflow is such a helpful resource (still after 13 years), is _because_ of the rules. Keep in mind that the purpose of Stack Overflow is _not_ for people to _ask_ questions, but rather for people to _find_ problems they also have (like a Wikipedia of programming questions). These rules make sure that people like me and yourself are able to _find_ answers on Stack Overflow, rather than a lot of junk they are not looking for. – Ivar Mar 24 '21 at 10:26
  • Say at some point there comes a better alternative to this problem. You can rest assured that on the duplicate new or updated answers will arise that address this better approach. But will every repetition of this same answer be updated as well? Maybe people will start using the wrong approach because they found this answer rather than the duplicate one. – Ivar Mar 24 '21 at 10:28
  • @Ivar if you think that way, then why you answered this duplicate question: https://stackoverflow.com/questions/54810942/send-a-get-request-with-a-body-in-javascript-xmlhttprequest/54811904#54811904 – Riyaz Khan Mar 24 '21 at 10:31
  • @RiyazKhan Because I was not aware of that duplicate by the time I answered it. Note that I only have 146 answers on Stack Overflow, yet I have voted to close _thousands_ of duplicates that I _could_ have answered, but didn't for this specific reason. Also saying "You also made a mistake once" doesn't justify it for everyone else to do so. – Ivar Mar 24 '21 at 10:38
  • 1
    @Ivar I totally understand your point, it's valid and I don't think there is no reason to discuss it more. Let's practice what's best for StackOverflow policy and what will be the best for the users who search the questions to find the answers. – Riyaz Khan Mar 24 '21 at 10:52