localStorage onClick button display undefined values?

Question

I am trying to display in localstorage the values I get from my api by clicking on a button. But it seems that the value is not displayed, but the api call has been made, my value is undefined, so I have to click a second time on the button for my value to be displayed.

there is my code :

<template>
  <div class="container">
    <h1>SignIn</h1>
    <div class="overlay-container">
      <form>
        <div class="form-group">
          <input
            type="text"
            class="form-control"
            placeholder="First name"
            
            id="FirstName"
          />
        </div>
        <div class="form-group">
          <input
            type="text"
            class="form-control"
            placeholder="Last name"
            id="Lastname"
          />
        </div>
        <div class="form-group">
          <input
            type="email"
            class="form-control"
            placeholder="Email"
            id="exampleInputEmail1"
            aria-describedby="emailHelp"
          />
        </div>
        <div class="form-group">
          <input
            type="password"
            placeholder="Password"
            class="form-control"
            
            id="exampleInputPassword1"
          />
        </div>
       <button @click="signIn" type="button" class="btn btn-primary">Sign In</button>
      </form>
       
      
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import VueAxios from 'vue-axios'

export default {
  name: "Signin",
  data(){
    return {
      userName:'',
      userid:''
    }
  },
  methods:{
    signIn(){
      axios.get(`http://localhost:4000/api/users/2`)
                .then(Response => this.userid = Response.data.data.id);
      axios.get(`http://localhost:4000/api/users/2`)
                .then(Response => this.UserName = Response.data.data.fname);          
      localStorage.userid = this.userid;
      localStorage.UserName = this.UserName;
    }
  }
};
</script>

some screenshot : First CLick | Second Click

Do you have any idea of whats the problem ?

Prime · Accepted Answer · 2020-10-29 19:53:32Z

1

This should work. https://www.w3schools.com/jsref/met_storage_setitem.asp

async signIn() {
  await axios.get(`http://localhost:4000/api/users/2`)
       .then(Response => this.userid = Response.data.data.id);
  await axios.get(`http://localhost:4000/api/users/2`)
       .then(Response => this.UserName = Response.data.data.fname);          
  localStorage.setItem('userid', this.userid);
  localStorage.setItem('UserName', this.UserName);
}

edited Oct 29, 2020 at 19:53

answered Oct 29, 2020 at 19:47

Prime

2,8592 gold badges11 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kehalS Over a year ago

Unfortunately , same results :/ @Prime

kehalS Over a year ago

Great , it worked and i understood what was the problem , thanks to you @Prime

Ethan Lipkind · Accepted Answer · 2020-10-29 19:54:29Z

1

The values from your api calls are only available inside the .then function. So what's happening is, you're setting the keys/values on localStorage directly, before the promise returned from axios.get has resolved.

The reason you are only seeing the values reflected in localStorage after the second click has to do with promises and the order of execution. The first time you click the button, you're sending two GET requests, and then immediately updating localStorage with this.userid / this.UserName, both of which are still empty strings. After that function finished executing, the promise from axios.get resolves, and the values of this.userid / this.UserName are updated by the .then function. The second time you click the button, the localStorage values are updated with the values of this.userid / this.UserName which were previously set.

Also, bear in mind, you should use localStorage.setItem('key', 'value') instead of localStorage.key = 'value'.

The bottom line is, you should move the code that stores key/value pairs in localStorage inside of the .then.

edited Oct 29, 2020 at 19:54

answered Oct 29, 2020 at 19:49

Ethan Lipkind

1,1565 silver badges7 bronze badges

3 Comments

kehalS Over a year ago

Ok so i have to localStorage outside of my function ? @EthanLipkind

Ethan Lipkind Over a year ago

you need to move the code that updates localStorage inside of the .then, which is still inside your signIn method.

kehalS Over a year ago

Thanks , really good explanation , i changed my code, and it works perfectlly, thank you @Ethan Lipkind

hityagi · Accepted Answer · 2020-10-29 20:04:32Z

You are not waiting for the ajax (xhr) to complete before saving the values in local storage. .then is the function called after the xhr is complete, so your code to save the values in local storage should be inside .then

axios.get(`http://localhost:4000/api/users/2`)
            .then(function(Response) {
                    this.userid = Response.data.data.id
                    localStorage.setItem('userid', this.userid);
                    this.UserName = Response.data.data.fname
                    localStorage.setItem('UserName', this.UserName);
            });

Because both your API calls are to the same endpoint, I have also combined them into one.

Now about your button click:

If you need to show data on click then you should only allow click after the data is received from the API call. To do this you can disable the button until .then is complete. And then re-enable it.

       //**button is disabled when page loaded** 
       axios.get(`http://localhost:4000/api/users/2`)
            .then(function(Response) {
                    this.userid = Response.data.data.id
                    localStorage.setItem('userid', this.userid);
                    this.UserName = Response.data.data.fname
                    localStorage.setItem('UserName', this.UserName);
                    //**enable button here**
            });

Now the fact that you are making the call to your API even when data is stored in localstorage:

I am assuming that you are storing the data in localstorage so that you don't have to make another call to fetch it again. But currently, your code always makes the API call even when the data is aready presnt in local storage. You can fix it like this:

//**button is disabled when page loaded** 
methods:{
    signIn(){

      var uId = localStorage.getItem('userid');
      var uName = localStorage.getItem('UserName');
      if(uId && uName) {
         //**enable button here**
      }
    }
    getData() {
        axios.get(`http://localhost:4000/api/users/2`)
            .then(function(Response) {
                    this.userid = Response.data.data.id
                    localStorage.setItem('userid', this.userid);
                    this.UserName = Response.data.data.fname
                    localStorage.setItem('UserName', this.UserName);
                    //**enable button here**
            });
      }
  }

Call getData when your page loads up and then enable the button. So, when the button is clicked the data, is available!

Yeah i was about to make this after i resolved my problem ! but thanks ! really good explanation ! @himanshu tyagi

cs641311 · Accepted Answer · 2020-10-29 19:48:02Z

0

1.) Try onclick instead of @click. 2.) Log to the Console the data you received from localhost:4000

answered Oct 29, 2020 at 19:48

cs641311

1003 silver badges12 bronze badges

Collectives™ on Stack Overflow

localStorage onClick button display undefined values?

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related