entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

como almacenar datos en localstorage?

tengo un problema anomalo en mi codigo, no puedo almacenar mas de un dato a la vez y no puedo saber el espacio que ocupa en la memoria, lo estoy probando a contianuacion les comparto mi codigo

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>fpages</title>
    <link rel="stylesheet" href="css/style.css">

    <script type="text/javascript">

  function capturar () {

  var email = document.getElementById("email").value;
  var pass = document.getElementById("pass").value;
  var casilla = document.getElementById("casilla").checked;
  var boxradio = document.getElementById("radio").checked;
  var selezione = document.getElementById("tiempo").value;
  var busqueda = document.getElementById("busqueda").value;

  var insertar = document.getElementById("section").innerHTML= [email, pass, casilla, boxradio, selezione, busqueda];

}

function guardar () {
  var email = document.getElementById("email").value;
  var pass = document.getElementById("pass").value;

  localStorage.setItem("email", email);
  localStorage.setItem("pass", pass);

}

function visualizar () {
  var peticion = localStorage.getItem("email");
  alert(peticion);

}

function info() {
  var registro = localStorage.length();
  alert(registro);
}

</script>

</head>

  <body>

  <header><p>login</p></header>

  <main>
    <div><span>accede</span>
      <form action="reg.php" method="post">
        <input type="text" id="email" name="email" placeholder="email">
        <input type="password" id="pass" name="pass" placeholder="pass">
        <input type="checkbox" id="casilla">
        <input type="radio" id="radio">
        <select id="tiempo">
          <option value="nublado">nublado</option>
          <option value="soleade">sole</option>
          <option value="normal">normal</option>
        </select>

        <input type="button" id="button" value="resumir" onclick="capturar()">

        <input type="submit" value="guardar en textoplano">
        <input type="reset" value="resetear">
        <input type="button" id="local" value="guardar en localStorage" onclick="guardar()">
        <input type="button" id="get" value="visualizar dato guardado" onclick="visualizar()">
        <input type="text" id="busqueda" placeholder="buscar dato guardado en localStorage">
        <input type="button" id="info" value="espacio ocupado" onclick="info()">
      </form>
    </div>
    <div id="section">
      <h1>output</h1>
    </div>
  </main>

</body>

</html>

2 Respuestas

1voto

morgooth Puntos1790

Estimado,

El problema que tienes en tu función siempre asignas un valor nuevo y esto hace que reemplace el valor anterior, podrías trabajar con un array para ir almacenando los datos.

  localStorage.setItem("email", email); //Reemplaza
  localStorage.setItem("pass", pass);   //Reemplaza

http://stackoverflow.com/questions/3357553/how-to-store-an-array-in-localstorage

steven comentado Oct 18, 2016

no entendi tu solucion ni en la otra pagina del vinculo, como debo remplazar esos valores? he buscado por toda la red y no encuentro nada al respecto, podrias ser tan amable de resolver mi codigo

3votos

jrgm0005 Puntos2980

Hola @stevenpro97,

A parte de lo que ha comentado @morgooth de que estás sobreescribiendo el valor, para guardar arrays necesitas del uso del objeto JSON para convertir un array en string (que es lo único que se almacena en localstorage) y viceversa.

Te pongo un ejemplo de uso:

// suponiendo una variable index que lleva el índice actual de almacenamiento.
// recoger el array de local storage.
var emails = JSON.parse(localStorage.getItem("emails"));
// recoger el email.
var email = prompt("New member email?");
// añadir en la próxima posición libre.
names[++index] = email;
// almacenar en localstorage el array con le nuevo elemento.
localStorage.setItem("emails ", JSON.stringify(emails ));

Espero que te sea útil.

Un saludo.

steven comentado Oct 18, 2016

practicamente para almacenar nuevos datos no hay otra forma que guardarlos en arrays con json. no puedo entender bien tu codigo podrias explicarlo mejor o hacerlo con mi codigo para que sea mas entendible
en ultimo caso me tocara utilizar indexdb a proposito tampoco seria mala idea usar websql aunque no este soportado

jrgm0005 comentado Oct 19, 2016

// Suponiendo una variable index que lleva el índice actual de almacenamiento.Esto es decir que tienes el length del array en otra variable, es por comodidad al explicarte, básicamente lo que hay que hacer es añadir una nueva entrada al array.

// recoger el array de local storage.
var emails = JSON.parse(localStorage.getItem("emails"));
// recoger el email.
var email = prompt("New member email?");
// añadir en la próxima posición libre.
emails[++index] = email;
// almacenar en localstorage el array con le nuevo elemento.
localStorage.setItem("emails ", JSON.stringify(emails ));

Esa es la manera didactica para que veas lo que se hace... Si quieres una solución, aquí la tienes pero mi consejo es que aprendas desde la base.

var emails = JSON.parse(localStorage.getItem("emails")) || [];
var email = prompt("New member email?");
emails.push(email);
localStorage.setItem("emails", JSON.stringify(emails));

Un saludo.

Juan Ramón González Morales.

Por favor, accede o regístrate para responder a esta pregunta.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Otras Preguntas y Respuestas


Actividad Reciente

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta