Guardar variables con localstorage

jagp1119 · #1 (**permalink**) 27/11/2013, 15:40

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

marlanga · #2 (**permalink**) 27/11/2013, 15:47

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.

jagp1119 · #3 (**permalink**) 27/11/2013, 16:40

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<!DOCTYPE HTML>
<html>
   
    <head>
 
        <link rel="stylesheet" href="estilo.css" type="text/css"/>
    
        <script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
        <script type="text/javascript" language="javascript">
        
         var contad;
            
        </script>
       
        <!-- ******************** SCRIPT DE JAVA PARA GUARDAR Y VISUALIZAR LAS VARIABLES DE LAS IMAGENES*********************-->
        
        <script type="text/javascript">
            var variable;
            var dato;
            var clicenimagen;
            
            dato = variable;
             
            var imagenes = new Array();
            imagenes[0] = "img/rambo.jpg";
            imagenes[1] = "img/hobbit2.jpg";
            imagenes[2] = "img/hunger_games.jpg";
            imagenes[3] = "img/thor2.jpg";
            
            function cuadro(numero){  //FUNCION PARA CAMBIAR LA IMAGEN PRINCIPAL CADA VEZ QUE SE DE EN UN EVENTO
                
                if (numero == 1){document.images["matrix"].src =imagenes[0];
                                 document.images["matrix2"].src =imagenes[1];
                                 document.images["matrix3"].src =imagenes[2];
                                 document.images["matrix4"].src =imagenes[3];}
                
                if (numero == 2){document.images["matrix"].src ="img/evento.jpg"}
                if (numero == 3){document.images["matrix"].src ="img/sinfonica.jpg"}
                if (numero == 4){document.images["matrix"].src ="img/capacitaciones.png"}
            }
                
            
           
            
            function guardar(){
                
                var objeto = variable;
                
                objeto = JSON.stringify(objeto);
            
                localStorage.setItem('miObjeto',objeto);
                
                
                
                var objeto2 = clicenimagen;
                
                objeto2 = JSON.stringify(objeto2);
            
                localStorage.setItem('miObjeto2',objeto2);
               
                
            }
                    
        </script>
         
    </head>
 
    <body>
        <div id="cajaheader"></div>
        <div id=principal>
            <header>
                <h1> principal </h1>
                <div id="buscador"></div>
         
            </header>
        </div> 
        
        
        <section>
                
            <div id="eventos">
                
                <a href="evento.html" ><img src="img/evento.jpg" style="position:absolute; width: 100%; height: 100%;" id="matrix" onclick="clicenimagen=1, guardar()"></a>
            </div>    
            
            <div id="eventos2">
            
                <a href="evento.html" ><img src="img/evento.jpg" style="position:absolute; width: 100%; height: 100%;" id="matrix2" onclick="clicenimagen=2, guardar()"></a>
            
            </div>
                
                
            <div id="eventos3">
            
                <a href="evento.html" ><img src="img/evento.jpg" style="position:absolute; width: 100%; height: 100%;" id="matrix3" onclick="clicenimagen=3,guardar()"></a>
            
            </div>
                
            <div id="eventos4">
                
                <a href="evento.html" ><img src="img/evento.jpg" style="position:absolute; width: 100%; height: 100%;" id="matrix4" onclick="clicenimagen=4, guardar()"></a>
            
            </div>
                
                <!-- ***********************SCRIPT DE JAVA **********************-->
                  
             
        </section>
 
        <article>
        
            <div id="cine">
                
                <a href="#" onclick="cuadro(1), variable=1"><img src="img/rambo.jpg" style="position:absolute; width:100%; height: 100%;" /></a>
                
                <div id="barra">
                
                    <h2> CINE </h2>
                    
                    
                 </div>    
                        
            </div> 
            
            <div id="pub">
                
                <a href="#" onclick="cuadro(2), variable = 2"><img src="img/evento.jpg" style="position:absolute; width:100%; height: 100%;" /></a>
                
                <div id="barra"> 
                
                    <h2> PUB </h2>
                    
                </div>
                        
            </div> 
            
            <div id="cultural" >
                
                <a href="#" onclick="cuadro(3), variable = 3"><img src="img/sinfonica.jpg" style="position:absolute; width:100%; height: 100%;" /></a>
                   
                <div id="barra"> 
                                
                    <h2> CULTURAL </h2>
                
                </div>
                        
            </div> 
            
            <div id="capacitaciones">
                
                <a href="#" onclick="cuadro(4), variable = 4"><img style="position:absolute; width:100%; height: 100%;" /></a>
                
                <div id="barra">
                
                    <h2> TALLERES </h2>
                    
                </div>    
                        
            </div> 
        
        </article>

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

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
   
    <head>
 
        <link rel="stylesheet" href="estilo.css" type="text/css"/>
    
        <script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
       
        
<!--****************************************** GEOLOCALIZACIÓN **********************************************-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 
          <script type="text/javascript"
              src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDvTZMtbcx79JLK6i3ARMzJn4t2fv6YM2I&sensor=true">
          </script>
          <script src='intelxdk.js'></script>
          <script src="geo.js"></script>
         
            
                
        
<!-- **************************SCRIPT PARA PONER LA IMAGEN CARGADA ANTERIORMENTE  ***********************-->        
        
        
        <script type="text/javascript"> 
            var objeto;
            var resultado;
            
           // var objeto2;
            //var resultado2;
                
        function cargar(){  
            
            resultado = localStorage.getItem('miObjeto');
            objeto = JSON.parse(resultado);
                 //document.write(objeto);
            //resultado2 = localStorage.getItem('miObjeto2');
            //objeto2 = JSON.parse(resultado2);
           }
          
        function cargador(){
            
            resultado2 = localStorage.getItem('miObjeto2');
            objeto2 = JSON.parse(resultado2);
               
        }
        
         
        function cargado(){
            resultado2 = localStorage.getItem('miObjeto2');
            objeto2 = JSON.parse(resultado2);
                   
            
        }    
            
        function imagenes(){
            if (objeto == 1) && (objeto2 == 1){document.images["matrix"].src ="img/rambo.jpg"}
            if (objeto == 2) && (objeto2 == 1){document.images["matrix"].src ="img/evento.jpg"}
            if (objeto == 3)&& (objeto2 == 2){document.images["matrix"].src ="img/sinfonica.jpg"}
            if (objeto == 4)&& (objeto2 == 2){document.images["matrix"].src ="img/capacitaciones.png"}
   
           }
       
           
        </script>    
        
    </head>
 
    <body onload="initialize(),imagenes()">
        
        
        
        <div id="cajaheader"></div>
        <div id=principal>
            <header>
                
                
                <h1> MEETPLACE </h1>
                <div id="buscador"></div>
                
            </header>
        </div> 
        
        <section3>
            
           <div id="map_canvas" ></div> 
                
                        
            <div id="fotoevento">
            
                <a href="#"><img src="" id="matrix" style="position:absolute; width:100%; height: 100%;" /></a>
            
            </div>
            
            <div id="descripcion">
                <script type="text/javascript"> 
                    var objeto;
                    var resultado;
                    
               
                    resultado = localStorage.getItem('miObjeto');
                    objeto = JSON.parse(resultado);
                    
                    if (objeto == 1){document.write('<p> hola tralalalalalalalallsd aosdjie a ererere</p>')}
                    
                </script>
            </div>
            
            <div id="arreglaperfil"></div>
            
        </section3>
            
           
        
        <article2>
            
           
                
        </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.