Why aren’t you showing the saved login in Localstorage?

Asked

Viewed 49 times

-1

I am creating a hybrid app with Cordova, and I want the user to log in first, it stays logged in direct. If it leaves the app for example, and logs in again, it doesn’t need to log in. I am using the code below so far, the value is stored in Localstorage, more is not displayed in the input after updating the same.

index.html

<h1 style="font-size: 1.8em;">Login</h1>
                <div class="alert alert-danger text-center" id="message"></div>
                <div>
                    <input type="name" class="form-control" id="txt_username" name="txt_username" placeholder="Usuário">
                </div>
                <div>
                    <input type="password" class="form-control mt-2" id="txt_pwd" name="txt_pwd" placeholder="Senha"/>
                </div>
                <div>
                    <input type="button" value="Entrar" class="btn btn-danger btn-block mt-3" name="but_submit" id="but_submit" />
                </div>

index js.


var login = document.getElementById('txt_username');

login.addEventListener('input', (e)=>{

window.localStorage.setItem('login', login.value);

var cat = window.localStorage.getItem('login');

$("#txt_username").val(cat);
})
javascript jquery html5 apache-cordova localstorage

  • The document.getElementById('txt_username').value(); will take the value of the element at the time it was executed. If the page was loaded this instant and the #txt_username has an empty value, the empty value will be saved. Use the own to inspect element and see in Localstorage the saved value, even in mobile is possible to do this.

  • How would you get the value at the time it is typed?

  • Still the same problem, I did the following test var login = "Olá" ; and he displays normally.

  • 1

    @Andrésantos can do this using the addEventListener, there is the event of change and of input. Then, when typed/modified you store the value.

  • I’m sorry but I never used addeventlistener, could you give me an example of what my code would look like with it?

  • @Augustovasques understand more I intend to pass later to the sqlite. For now the Localstorage would break a branch.

  • A didn’t work :( I added an image the question of how my final code was, but it didn’t work

  • If I take value make a mistake [object HTMLInputElement]

  • There’s no saving it anyway

  • Edit the question and put a [mcve] containing the html and code that is trying to use localStorage.

  • I don’t understand, it’s not storing in Localstorage the value, more like I said if I do var login = "Olá" it stores normally

  • I modified the question, added the suggestions and HTML

  • The code works perfectly. See: https://repl.it/EquatorialExtrasmallCircles the problem is that you are trying to update an input with a value it already contains and the change is visually redundant.

  • Yes it takes the value, plus when refreshing the page the value is not displayed in the input

  • But you didn’t program for this!!! Damn, you have to put this functionality to recover the data from localStorage in the event load page. In the event input you store the data on load you recover.

  • @Augustovasques I updated the question when you asked, and I put this detail :)

Show 11 more comments

1 answer

1

In the onload page you have to call a function to check if there is anything on localStorage, if there is, it inserts into the input, if not, the input is still clean.

I took a quick look at the documentation on the Ordova and found this here. I think it might help you.

I made a code with pure js for you to take a look at.

const login = document.getElementById('txt_username');

login.addEventListener('input', (e)=>{
  window.localStorage.setItem('login', login.value);
  const cat = window.localStorage.getItem('login');
  login.val(cat);
});

window.onload = () => {
  const cat = window.localStorage.getItem('login');
  if (cat) {
    login.value = cat
  }
}
<h1 style="font-size: 1.8em;">Login</h1>
<div class="alert alert-danger text-center" id="message"></div>
<div>
  <input type="name" class="form-control" id="txt_username" name="txt_username" placeholder="Usuário">
</div>
<div>
  <input type="password" class="form-control mt-2" id="txt_pwd" name="txt_pwd" placeholder="Senha"/>
</div>
<div>
  <input type="button" value="Entrar" class="btn btn-danger btn-block mt-3" name="but_submit" id="but_submit" />
</div>

Browser other questions tagged javascript jquery html5 apache-cordova localstorage

You are not signed in. Login or sign up in order to post.