3

Tengo un problema, no entiendo por qué no muestra los datos, al ser ingresados.

<label for="nombre"> Nombre: </label>
<input type="text" id="nombre" />
<input type="button" onclick="guardarDatos()" value="Guardar datos" />
<p id="datos"> </p>
<input type="button" onclick="recuperarDatos()" value="Recuperar datos" />

JS

function guardarDatos(){
 localStorage.nombre = document.getElementById("nombre").value;
}

function recuperarDatos(){
 if ((localStorage.nombre != undefined)) {
  document.getElementById("datos").innerHTML = "Nombre: " + localStorage.nombre;
 }
 else{
  document.getElementById("datos").innerHTML = "No has introducido tu nombre";
 }
}

Mi idea es guardar el nombre y luego usar la variable nombre, en varias parte del html con un ID.

Olvidé mencionar que tengo los siguientes errores.

Uncaught ReferenceError: guardarDatos is not defined
    at HTMLInputElement.onclick ((index):67)
onclick @ (index):67

(index):69 Uncaught ReferenceError: recuperarDatos is not defined
    at HTMLInputElement.onclick ((index):69)

Pueden ver mi codigo,

https://jsfiddle.net/JDLA1/zfgjr41s/

4
  • Estás usando algun tipo de snippet online como jsfiddle?
    – lois6b
    Commented el 29 mar. 2017 a las 8:00
  • Si, he actualizado la pregunta @lois6b
    – Juan David
    Commented el 29 mar. 2017 a las 8:01
  • Te he actualizado el fiddle (jsfiddle.net/zfgjr41s/1). El problema es en JS que carga las funciones en el onLoad, pon en Head
    – lois6b
    Commented el 29 mar. 2017 a las 8:01
  • Gracias @lois6b, la proxima formula la respuesta para darte puntuacion :)
    – Juan David
    Commented el 29 mar. 2017 a las 8:04

3 respuestas 3

3

La API LocalStorage no se usa así.

En lugar de como lo estás haciendo, deberías de hacerlo de la siguiente manera:

function guardarDatos(){
  localStorage.setItem( "nombre", document.getElementById("nombre").value );
}

function recuperarDatos(){
  if( localStorage.getItem( "nombre" ) != undefined ) {
    document.getElementById("datos").innerHTML = "Nombre: " + localStorage.getItem( "nombre" );
  } else {
    document.getElementById("datos").innerHTML = "No has introducido tu nombre";
  }
}
1
  • Actualizado, Muchas gracias!
    – Juan David
    Commented el 29 mar. 2017 a las 8:10
2

Dejando a un lado el uso de LocalStorage(explicado por Trauma en su respuesta), el problema es que el jsfiddle carga las funciones JS en onLoad por defecto.

Si quieres cambiar el ajuste, pulsando en el boton Javascript ⚙, ahi puedes elegir cuándo se cargan.

Si lo cambias a no wrap - in head (que es donde se añaden los <script>'s), funciona bien:

Demo:

https://jsfiddle.net/zfgjr41s/1/

4
  • Muchas Gracias, por el dato!... como puedo despues de darle guardar datos, ocultar el formulario y dejar solo el nombre?
    – Juan David
    Commented el 29 mar. 2017 a las 8:09
  • @JuanDavid no se exactamente lo que quieres. algo asi ? (es algo muy cutre y basico)
    – lois6b
    Commented el 29 mar. 2017 a las 8:13
  • jajaja, Eso esta perfecto, Gracias!
    – Juan David
    Commented el 29 mar. 2017 a las 8:15
  • @JuanDavid de nada, me alegra ser de ayuda
    – lois6b
    Commented el 29 mar. 2017 a las 8:15
2

El código que tienes funciona perfectamente, pruebalo en un fichero html y js en vez de jsfiddle, si bien la mejor manera de usar LocalStorage es como bien dice el compañero @Trauma. Saludos

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.