Foros del Web » Programando para Internet » Javascript »

Guardar variables con localstorage

Estas en el tema de Guardar variables con localstorage en el foro de Javascript en Foros del Web. Hola, estoy guardando una variables dentro de mi aplicacion con localStorage, pero necesito guardar ahora otra variable, y lo hago con el mismo procedimiento, logicamente ...
  #1 (permalink)  
Antiguo 27/11/2013, 15:40
 
Fecha de Ingreso: noviembre-2013
Mensajes: 84
Antigüedad: 10 años, 4 meses
Puntos: 1
Guardar variables con localstorage

Hola, estoy guardando una variables dentro de mi aplicacion con localStorage, pero necesito guardar ahora otra variable, y lo hago con el mismo procedimiento, logicamente cambiando el nombre a las variables pero no me funciona,¿ solo se puede utilizar esa funcion una vez en la página?, como puedo guardar mas de 1 variable?.

Gracias
  #2 (permalink)  
Antiguo 27/11/2013, 15:47
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 2 meses
Puntos: 206
Respuesta: Guardar variables con localstorage

Algo estarás haciendo mal. No tengo poderes mentales así que sin código es imposible saber qué haces. Usa http://jsfiddle.net/ para poner un ejemplo de tu problema en vivo.

Por otra parte, para depurar tu código usa google chrome, presiona CTRL+SHIFT+J. En la pestaña RESOURCES tienes un apartado que pone "Local Storage" de la página que tienes abierta en ese momento. Ahí podrás ver en vivo lo que contiene tu diccionario de datos y también se actualiza en tiempo real cuando insertas o modificas otra.
  #3 (permalink)  
Antiguo 27/11/2013, 16:40
 
Fecha de Ingreso: noviembre-2013
Mensajes: 84
Antigüedad: 10 años, 4 meses
Puntos: 1
Respuesta: Guardar variables con localstorage

Gracias marlanga, acá está lo que estoy haciendo, la verdad es que soy nuevo en esto y pues tambien esta un poco desordenado

Código HTML:
Ver original
  1. <!DOCTYPE HTML>
  2.    
  3.     <head>
  4.  
  5.         <link rel="stylesheet" href="estilo.css" type="text/css"/>
  6.    
  7.         <script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
  8.         <script type="text/javascript" language="javascript">
  9.        
  10.          var contad;
  11.            
  12.         </script>
  13.        
  14.         <!-- ******************** SCRIPT DE JAVA PARA GUARDAR Y VISUALIZAR LAS VARIABLES DE LAS IMAGENES*********************-->
  15.        
  16.         <script type="text/javascript">
  17.             var variable;
  18.             var dato;
  19.             var clicenimagen;
  20.            
  21.             dato = variable;
  22.              
  23.             var imagenes = new Array();
  24.             imagenes[0] = "img/rambo.jpg";
  25.             imagenes[1] = "img/hobbit2.jpg";
  26.             imagenes[2] = "img/hunger_games.jpg";
  27.             imagenes[3] = "img/thor2.jpg";
  28.            
  29.             function cuadro(numero){  //FUNCION PARA CAMBIAR LA IMAGEN PRINCIPAL CADA VEZ QUE SE DE EN UN EVENTO
  30.                
  31.                 if (numero == 1){document.images["matrix"].src =imagenes[0];
  32.                                  document.images["matrix2"].src =imagenes[1];
  33.                                  document.images["matrix3"].src =imagenes[2];
  34.                                  document.images["matrix4"].src =imagenes[3];}
  35.                
  36.                 if (numero == 2){document.images["matrix"].src ="img/evento.jpg"}
  37.                 if (numero == 3){document.images["matrix"].src ="img/sinfonica.jpg"}
  38.                 if (numero == 4){document.images["matrix"].src ="img/capacitaciones.png"}
  39.             }
  40.                
  41.            
  42.            
  43.            
  44.             function guardar(){
  45.                
  46.                 var objeto = variable;
  47.                
  48.                 objeto = JSON.stringify(objeto);
  49.            
  50.                 localStorage.setItem('miObjeto',objeto);
  51.                
  52.                
  53.                
  54.                 var objeto2 = clicenimagen;
  55.                
  56.                 objeto2 = JSON.stringify(objeto2);
  57.            
  58.                 localStorage.setItem('miObjeto2',objeto2);
  59.                
  60.                
  61.             }
  62.                    
  63.         </script>
  64.          
  65.     </head>
  66.  
  67.     <body>
  68.         <div id="cajaheader"></div>
  69.         <div id=principal>
  70.             <header>
  71.                 <h1> principal </h1>
  72.                 <div id="buscador"></div>
  73.          
  74.             </header>
  75.         </div>
  76.        
  77.        
  78.         <section>
  79.                
  80.             <div id="eventos">
  81.                
  82.                 <a href="evento.html" ><img src="img/evento.jpg" style="position:absolute; width: 100%; height: 100%;" id="matrix" onclick="clicenimagen=1, guardar()"></a>
  83.             </div>    
  84.            
  85.             <div id="eventos2">
  86.            
  87.                 <a href="evento.html" ><img src="img/evento.jpg" style="position:absolute; width: 100%; height: 100%;" id="matrix2" onclick="clicenimagen=2, guardar()"></a>
  88.            
  89.             </div>
  90.                
  91.                
  92.             <div id="eventos3">
  93.            
  94.                 <a href="evento.html" ><img src="img/evento.jpg" style="position:absolute; width: 100%; height: 100%;" id="matrix3" onclick="clicenimagen=3,guardar()"></a>
  95.            
  96.             </div>
  97.                
  98.             <div id="eventos4">
  99.                
  100.                 <a href="evento.html" ><img src="img/evento.jpg" style="position:absolute; width: 100%; height: 100%;" id="matrix4" onclick="clicenimagen=4, guardar()"></a>
  101.            
  102.             </div>
  103.                
  104.                 <!-- ***********************SCRIPT DE JAVA **********************-->
  105.                  
  106.              
  107.         </section>
  108.  
  109.         <article>
  110.        
  111.             <div id="cine">
  112.                
  113.                 <a href="#" onclick="cuadro(1), variable=1"><img src="img/rambo.jpg" style="position:absolute; width:100%; height: 100%;" /></a>
  114.                
  115.                 <div id="barra">
  116.                
  117.                     <h2> CINE </h2>
  118.                    
  119.                    
  120.                  </div>    
  121.                        
  122.             </div>
  123.            
  124.             <div id="pub">
  125.                
  126.                 <a href="#" onclick="cuadro(2), variable = 2"><img src="img/evento.jpg" style="position:absolute; width:100%; height: 100%;" /></a>
  127.                
  128.                 <div id="barra">
  129.                
  130.                     <h2> PUB </h2>
  131.                    
  132.                 </div>
  133.                        
  134.             </div>
  135.            
  136.             <div id="cultural" >
  137.                
  138.                 <a href="#" onclick="cuadro(3), variable = 3"><img src="img/sinfonica.jpg" style="position:absolute; width:100%; height: 100%;" /></a>
  139.                    
  140.                 <div id="barra">
  141.                                
  142.                     <h2> CULTURAL </h2>
  143.                
  144.                 </div>
  145.                        
  146.             </div>
  147.            
  148.             <div id="capacitaciones">
  149.                
  150.                 <a href="#" onclick="cuadro(4), variable = 4"><img style="position:absolute; width:100%; height: 100%;" /></a>
  151.                
  152.                 <div id="barra">
  153.                
  154.                     <h2> TALLERES </h2>
  155.                    
  156.                 </div>    
  157.                        
  158.             </div>
  159.        
  160.         </article>

Esta es la pagina que sigue una vez se de clic en las imagenes que se especifican

Código HTML:
Ver original
  1. <!DOCTYPE HTML>
  2.    
  3.     <head>
  4.  
  5.         <link rel="stylesheet" href="estilo.css" type="text/css"/>
  6.    
  7.         <script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
  8.        
  9.        
  10. <!--****************************************** GEOLOCALIZACIÓN **********************************************-->
  11.         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
  12.         <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  13.  
  14.           <script type="text/javascript"
  15.              src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDvTZMtbcx79JLK6i3ARMzJn4t2fv6YM2I&sensor=true">
  16.           </script>
  17.           <script src='intelxdk.js'></script>
  18.           <script src="geo.js"></script>
  19.          
  20.            
  21.                
  22.        
  23. <!-- **************************SCRIPT PARA PONER LA IMAGEN CARGADA ANTERIORMENTE  ***********************-->        
  24.        
  25.        
  26.         <script type="text/javascript">
  27.             var objeto;
  28.             var resultado;
  29.            
  30.            // var objeto2;
  31.             //var resultado2;
  32.                
  33.         function cargar(){ 
  34.            
  35.             resultado = localStorage.getItem('miObjeto');
  36.             objeto = JSON.parse(resultado);
  37.                  //document.write(objeto);
  38.             //resultado2 = localStorage.getItem('miObjeto2');
  39.             //objeto2 = JSON.parse(resultado2);
  40.            }
  41.          
  42.         function cargador(){
  43.            
  44.             resultado2 = localStorage.getItem('miObjeto2');
  45.             objeto2 = JSON.parse(resultado2);
  46.                
  47.         }
  48.        
  49.          
  50.         function cargado(){
  51.             resultado2 = localStorage.getItem('miObjeto2');
  52.             objeto2 = JSON.parse(resultado2);
  53.                    
  54.            
  55.         }    
  56.            
  57.         function imagenes(){
  58.             if (objeto == 1) && (objeto2 == 1){document.images["matrix"].src ="img/rambo.jpg"}
  59.            if (objeto == 2) && (objeto2 == 1){document.images["matrix"].src ="img/evento.jpg"}
  60.            if (objeto == 3)&& (objeto2 == 2){document.images["matrix"].src ="img/sinfonica.jpg"}
  61.            if (objeto == 4)&& (objeto2 == 2){document.images["matrix"].src ="img/capacitaciones.png"}
  62.  
  63.           }
  64.      
  65.          
  66.        </script>    
  67.        
  68.    </head>
  69.  
  70.    <body onload="initialize(),imagenes()">
  71.        
  72.        
  73.        
  74.        <div id="cajaheader"></div>
  75.        <div id=principal>
  76.            <header>
  77.                
  78.                
  79.                <h1> MEETPLACE </h1>
  80.                <div id="buscador"></div>
  81.                
  82.            </header>
  83.        </div>
  84.        
  85.        <section3>
  86.            
  87.           <div id="map_canvas" ></div>
  88.                
  89.                        
  90.            <div id="fotoevento">
  91.            
  92.                <a href="#"><img src="" id="matrix" style="position:absolute; width:100%; height: 100%;" /></a>
  93.            
  94.             </div>
  95.            
  96.             <div id="descripcion">
  97.                 <script type="text/javascript">
  98.                     var objeto;
  99.                     var resultado;
  100.                    
  101.                
  102.                     resultado = localStorage.getItem('miObjeto');
  103.                     objeto = JSON.parse(resultado);
  104.                    
  105.                     if (objeto == 1){document.write('<p> hola tralalalalalalalallsd aosdjie a ererere</p>')}
  106.                    
  107.                 </script>
  108.             </div>
  109.            
  110.             <div id="arreglaperfil"></div>
  111.            
  112.         </section3>
  113.            
  114.            
  115.        
  116.         <article2>
  117.            
  118.            
  119.                
  120.         </article2>

Eso es basicamente lo que estoy haciendo pero no se cuando pongo las opciones dentro del "if", ya no me salen las imagenes. No se si me entiendan, no se si con esa información sea suficiente.

Etiquetas: funcion, localstorage, variable, variables
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:02.