1

Básicamente el problema que tengo es que no sé cómo ocultar el input y el botón con localstorage, así cuando refresque la página no me muestre el input ni el botón, sólo el nombre.

HTML

<span id="label-user"></span><br>
<input type="text" id="inpuname" />
<input type="button" onclick="saveLogin()" value="Save" id="save"/>

JavaScript

function saveLogin(){
  var labelUser = localStorage.getItem("usuarioname");
  $("#label-user").text(labelUser);
  localStorage.setItem( "usuarioname", document.getElementById("inpuname").value );
  document.getElementById("label-user").innerHTML += document.getElementById("inpuname").value;
};
saveLogin()

jQuery(function(){
         jQuery('#save').click(function(){
               jQuery('#inpuname').hide();
               jQuery('#save').hide();
    });
});

Código https://jsfiddle.net/JDLA1/zfgjr41s/18/

2 respuestas 2

4

He separado la funcion saveLogin() en dos. Dejando saveLogin para lo que es el guardado del input en el localStorage y la funcion, cargarLabel que rellena el label con el valor.

Asi cuando carga la pagina, llamas solo a cargarLabel. Si existe valor, se rellena y se ocultan el input y el boton. Si no hay valor que meter, se hace el proceso normal.

No haria falta la funcion jQuery que tenias porque ahora al hacer save, se llama a saveLogin que llama a cargarLabel y oculta los componentes.

function saveLogin() {

  localStorage.setItem("usuarioname", document.getElementById("inpuname").value);
  cargarLabel();
};
cargarLabel();

function cargarLabel() {
  var labelUser = localStorage.getItem("usuarioname");
  if (labelUser) {

    //alert("ocultando");
    jQuery('#inpuname').hide();
    jQuery('#save').hide();
    $("#label-user").text(labelUser);
  }
  
}
<span id="label-user"></span>
<br>
<input type="text" id="inpuname" />
<input type="button" onclick="saveLogin()" value="Save" id="save" />

Demo:

https://jsfiddle.net/zfgjr41s/21/

1
  • 1
    Cool! ya lo habia echo con cookies! pero este esta bueno, muchas gracias
    – Juan David
    Commented el 29 mar. 2017 a las 10:18
1

Quizá con una condición que compruebe si tienes nombre en localStorage?

...
var labelUser = localStorage.getItem("usuarioname")
if (labelUser) {
  jQuery('#inpuname').hide()
  jQuery('#save').hide()
}
...
1
  • lo mismo que se me ocurrió, pero te he ninja'deado xDD +1
    – lois6b
    Commented el 29 mar. 2017 a las 10:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.