Javascript Como guardar a string de um input no JS em uma variável?

[Visitante]

Estou tentando criar uma tela de login funcional com JS e HTML, mas como obter os valores dos inputs e guardar em uma string para comparar?
 

function entrar(){
        var login = +document.getElementById("login");
        var senha = +document.getElementById("senha").value;
        
        alert(+login);
        alert(+senha);
}

 

[devair1010]

@felipe honorio    se você usar um outro comando para ler do teclado seria melhor , 

function entrar()
{
    var login = window.prompt('Qual seu nome ? ' )  //  +document.getElementById("login");
    var senha = window.prompt('Qual sua senha ? ')  //  +document.getElementById("senha").value;
    window.alert('nome do Login '+login);
    window.alert('A senha '+senha);
}

 

[DiF]

@felipe honorio @devair1010 Esse método é para quando se usa um "prompt" de uma aplicação.  Não é usado comumente em sistemas de login.

O ideal é usar um campo input do tipo text,  e do tipo password para senha.

 

Exemplo:

<input type="text" id="login" name="login" placeholder="Login"/>
<input type="password" id="sennha" name="senha" placeholder="Senha"/>

 

Para pegar esses valores no javascript é desta maneira:

var login = document.getElementById("login").value;
var senha = document.getElementById("senha").value;
        
alert("Nome de usuario: "+ login+"\n"+"Senha é: "+senha);

Porém isso é só para aprendizado,  fazer um sistema de login, requer um banco de dados, uma linguagem de programação server-side como o PHP por exemplo.

[Visitante]

  Em 07/12/2020 às 00:15, DiF disse:

@felipe honorio @devair1010 Esse método é para quando se usa um "prompt" de uma aplicação.  Não é usado comumente em sistemas de login.

O ideal é usar um campo input do tipo text,  e do tipo password para senha.

 

Exemplo:

<input type="text" id="login" name="login" placeholder="Login"/>
<input type="password" id="sennha" name="senha" placeholder="Senha"/>

 

Para pegar esses valores no javascript é desta maneira:

var login = document.getElementById("login").value;
var senha = document.getElementById("senha").value;
        
alert("Nome de usuario: "+ login+"\n"+"Senha é: "+senha);

Porém isso é só para aprendizado,  fazer um sistema de login, requer um banco de dados, uma linguagem de programação server-side como o PHP por exemplo.

Expandir  

Muito obrigado! Pode me dar mais dicas de como simular um ambiente com BD, sessão e login somente com HTML e JS? até onde eu posso ir? o que seria legal de simular? posso criar áreas restritas?  

@devair1010 Vou usar isso em outros momentos, obrigado pela dica.

[b3k1d0]

Se for web, você simplesmente pode usar o localStorage:

como:

var db = window.localStorage

var login = document.querySelector("input#login").text

db.login.setItem("nome", login);

 

Ex acima, olhe a documentação para entender melhos porém 

@DiF Porém isso é só para aprendizado,  fazer um sistema de login, requer um banco de dados, uma linguagem de programação server-side como o PHP por exemplo.

[Visitante]

  Em 07/12/2020 às 19:37, b3k1d0 disse:

Se for web, você simplesmente pode usar o localStorage:

como:

var db = window.localStorage

var login = document.querySelector("input#login").text

db.login.setItem("nome", login);

 

Ex acima, olhe a documentação para entender melhos porém 

@DiF Porém isso é só para aprendizado,  fazer um sistema de login, requer um banco de dados, uma linguagem de programação server-side como o PHP por exemplo.

Expandir  

Sim, exatamente pra estudos! não tentaria fazer algo web aberto sem BD hehe

Esse comando window.localStorage simula um BD? o que exatamente ele faz? ele guarda uma sessão no navegador?

[DiF]

@felipe honorio

  Em 07/12/2020 às 23:02, felipe honorio disse:

Esse comando window.localStorage simula um BD?

Expandir  

Ele não simula, o navegador tem um "banco de dados interno" um armazenamento local, onde pode ser usado de diversas maneiras. 

Acho que posso dizer que local storage é muito semelhante aos cookies. Na verdade, podemos dizer que é uma melhoria do cookie. Onde o cookie pode guardar apenas 4kb, enquando o local storage guarda até 5MB de informações.

E ambos são persistentes. Ou seja, permanecem guardados até que remova.

Diferente de SessionStorage que é semelhante ao local storage, porém não é persistente.

 

Então no seu caso, se quer simular um banco de dados,  podes usar tanto o local storage, quanto um arquivo JSON.

 

Se está estudando banco de dados, recomendo muito partir direto para o MySQL, aprender a criar tabelas, definir índices, fazer os relacionamentos, principalmente estudar sobre a normas formais, que visa evitar inconsistências. 

 

O local storage é ideal para guardar dados locais, que não precisam de requisição de servidor. Por exemplo Tema claro ou escuro em um site.