react js localstorage value object

Question

I save what I get from my backend to a local storage:+

   async onSubmit(e){
        e.preventDefault();
        const {login, password } = this.state;

        const response = await api.post('/login', { login,password });
        const user = response.data.user;
        const {jwt} = response.data;
        console.log(user);
        localStorage.setItem('token', jwt);
        localStorage.setItem('user', user);
        this.props.history.push("/home");
    }

my

const user = response.data.user;

return this:

{id: 2, name: "spt", email: "email", login: "spt", password: "$2a$10$Rqc1VU1TfKD6MypNzbgemeR0O4YeXIFy1XiURjNeHk0gpWJitp4da", …}

two object [object object]

Can you please clarify what your question is? – scrowler Nov 28 '19 at 19:38 — scrowler, Nov 28 '19 at 19:38

svltmccc · Accepted Answer · 2019-11-30T12:26:39.823

11

Local Storage is key-value storage where key is string and value is string also.

You must stringify your data, you can do this

localStorage.setItem('user', JSON.stringify(user));

And get it like

const user = JSON.parse(localStorage.getItem('user'));

edited Nov 30 '19 at 12:26

answered Nov 28 '19 at 19:43

svltmccc

1,356
9
25

Hello i did that what you said and in contact by socket with my backend i sent const player = JSON.parse (localStorage.getItem ('user')); this.socket.emit ('addPlayer-Queue', player); – Felipe Nov 28 '19 at 19:54
But my backend didn't receive this value, if I change the value to 1 for example my backend gets – Felipe Nov 28 '19 at 19:55
@Felipe socket take string too, you should not do JSON.parse before sending using socket – svltmccc Nov 28 '19 at 19:57
Doing this for some reason I don't get this value in the backend – Felipe Nov 28 '19 at 19:57
i need make this: const player = localStorage.getItem('user') ? – Felipe Nov 28 '19 at 19:58
@Felipe you can do next: const user = localStorage.getItem('user'); and send user variable using socket – svltmccc Nov 28 '19 at 19:58
I did it now and still not getting backend I believe because of localStorage.setItem ('user', JSON.stringify (user)); – Felipe Nov 28 '19 at 20:00
Can you show me result of console.log(user) after getItem from storage? – svltmccc Nov 28 '19 at 20:01
{"id":2,"name":"spt","email":"email","login":"spt","password":"$2a$10$Rqc1VU1TfKD6MypNzbgemeR0O4YeXIFy1XiURjNeHk0gpWJitp4da","mmr":1000,"createdAt":"2019-11-26T17:48:09.861Z","updatedAt":"2019-11-26T17:48:09.861Z"} – Felipe Nov 28 '19 at 20:02
So, all good. How do you submit this data using socket? – svltmccc Nov 28 '19 at 20:03
this.socket.emit('addPlayer-Queue', player); – Felipe Nov 28 '19 at 20:04
And on my backend I give console.log my value – Felipe Nov 28 '19 at 20:04
if i set localStorage.setItem ('user', user); like this i can get on my backend [object Object] but I don't know how I will handle it i can get on my backend – Felipe Nov 28 '19 at 20:13
@Felipe I don't understand :( – svltmccc Nov 28 '19 at 20:20
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/203275/discussion-between-saveli-tomac-and-felipe). – svltmccc Nov 28 '19 at 20:21
In my back end I can't get any value with this result: [object Object]? – Felipe Nov 28 '19 at 20:21

score 6 · Answer 2 · answered Nov 28 '19 at 19:43

localstorage does not support objects. If you want to store the user in localstorage, you need to stringify it: JSON.stringify(user)

If you want to store objects, you could use a third-party NPM module like localforage (not supported in all browsers).

react js localstorage value object

2 Answers2