Tema: Guardar variables con localstorage
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 27/11/2013, 16:40
jagp1119
 
Fecha de Ingreso: noviembre-2013
Mensajes: 84
Antigüedad: 10 años, 5 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. <html>
  3.    
  4.     <head>
  5.  
  6.         <link rel="stylesheet" href="estilo.css" type="text/css"/>
  7.     
  8.         <script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
  9.         <script type="text/javascript" language="javascript">
  10.         
  11.          var contad;
  12.             
  13.         </script>
  14.        
  15.         <!-- ******************** SCRIPT DE JAVA PARA GUARDAR Y VISUALIZAR LAS VARIABLES DE LAS IMAGENES*********************-->
  16.         
  17.         <script type="text/javascript">
  18.             var variable;
  19.             var dato;
  20.             var clicenimagen;
  21.             
  22.             dato = variable;
  23.              
  24.             var imagenes = new Array();
  25.             imagenes[0] = "img/rambo.jpg";
  26.             imagenes[1] = "img/hobbit2.jpg";
  27.             imagenes[2] = "img/hunger_games.jpg";
  28.             imagenes[3] = "img/thor2.jpg";
  29.             
  30.             function cuadro(numero){  //FUNCION PARA CAMBIAR LA IMAGEN PRINCIPAL CADA VEZ QUE SE DE EN UN EVENTO
  31.                 
  32.                 if (numero == 1){document.images["matrix"].src =imagenes[0];
  33.                                  document.images["matrix2"].src =imagenes[1];
  34.                                  document.images["matrix3"].src =imagenes[2];
  35.                                  document.images["matrix4"].src =imagenes[3];}
  36.                 
  37.                 if (numero == 2){document.images["matrix"].src ="img/evento.jpg"}
  38.                 if (numero == 3){document.images["matrix"].src ="img/sinfonica.jpg"}
  39.                 if (numero == 4){document.images["matrix"].src ="img/capacitaciones.png"}
  40.             }
  41.                 
  42.             
  43.            
  44.             
  45.             function guardar(){
  46.                 
  47.                 var objeto = variable;
  48.                 
  49.                 objeto = JSON.stringify(objeto);
  50.             
  51.                 localStorage.setItem('miObjeto',objeto);
  52.                 
  53.                 
  54.                 
  55.                 var objeto2 = clicenimagen;
  56.                 
  57.                 objeto2 = JSON.stringify(objeto2);
  58.             
  59.                 localStorage.setItem('miObjeto2',objeto2);
  60.                
  61.                 
  62.             }
  63.                     
  64.         </script>
  65.          
  66.     </head>
  67.  
  68.     <body>
  69.         <div id="cajaheader"></div>
  70.         <div id=principal>
  71.             <header>
  72.                 <h1> principal </h1>
  73.                 <div id="buscador"></div>
  74.          
  75.             </header>
  76.         </div> 
  77.         
  78.         
  79.         <section>
  80.                 
  81.             <div id="eventos">
  82.                 
  83.                 <a href="evento.html" ><img src="img/evento.jpg" style="position:absolute; width: 100%; height: 100%;" id="matrix" onclick="clicenimagen=1, guardar()"></a>
  84.             </div>    
  85.             
  86.             <div id="eventos2">
  87.             
  88.                 <a href="evento.html" ><img src="img/evento.jpg" style="position:absolute; width: 100%; height: 100%;" id="matrix2" onclick="clicenimagen=2, guardar()"></a>
  89.             
  90.             </div>
  91.                 
  92.                 
  93.             <div id="eventos3">
  94.             
  95.                 <a href="evento.html" ><img src="img/evento.jpg" style="position:absolute; width: 100%; height: 100%;" id="matrix3" onclick="clicenimagen=3,guardar()"></a>
  96.             
  97.             </div>
  98.                 
  99.             <div id="eventos4">
  100.                 
  101.                 <a href="evento.html" ><img src="img/evento.jpg" style="position:absolute; width: 100%; height: 100%;" id="matrix4" onclick="clicenimagen=4, guardar()"></a>
  102.             
  103.             </div>
  104.                 
  105.                 <!-- ***********************SCRIPT DE JAVA **********************-->
  106.                   
  107.              
  108.         </section>
  109.  
  110.         <article>
  111.         
  112.             <div id="cine">
  113.                 
  114.                 <a href="#" onclick="cuadro(1), variable=1"><img src="img/rambo.jpg" style="position:absolute; width:100%; height: 100%;" /></a>
  115.                 
  116.                 <div id="barra">
  117.                 
  118.                     <h2> CINE </h2>
  119.                     
  120.                     
  121.                  </div>    
  122.                         
  123.             </div> 
  124.             
  125.             <div id="pub">
  126.                 
  127.                 <a href="#" onclick="cuadro(2), variable = 2"><img src="img/evento.jpg" style="position:absolute; width:100%; height: 100%;" /></a>
  128.                 
  129.                 <div id="barra"> 
  130.                 
  131.                     <h2> PUB </h2>
  132.                     
  133.                 </div>
  134.                         
  135.             </div> 
  136.             
  137.             <div id="cultural" >
  138.                 
  139.                 <a href="#" onclick="cuadro(3), variable = 3"><img src="img/sinfonica.jpg" style="position:absolute; width:100%; height: 100%;" /></a>
  140.                    
  141.                 <div id="barra"> 
  142.                                 
  143.                     <h2> CULTURAL </h2>
  144.                 
  145.                 </div>
  146.                         
  147.             </div> 
  148.             
  149.             <div id="capacitaciones">
  150.                 
  151.                 <a href="#" onclick="cuadro(4), variable = 4"><img style="position:absolute; width:100%; height: 100%;" /></a>
  152.                 
  153.                 <div id="barra">
  154.                 
  155.                     <h2> TALLERES </h2>
  156.                     
  157.                 </div>    
  158.                         
  159.             </div> 
  160.         
  161.         </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. <html>
  3.    
  4.     <head>
  5.  
  6.         <link rel="stylesheet" href="estilo.css" type="text/css"/>
  7.     
  8.         <script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
  9.        
  10.         
  11. <!--****************************************** GEOLOCALIZACIÓN **********************************************-->
  12.         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
  13.         <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  14.  
  15.           <script type="text/javascript"
  16.               src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDvTZMtbcx79JLK6i3ARMzJn4t2fv6YM2I&sensor=true">
  17.           </script>
  18.           <script src='intelxdk.js'></script>
  19.           <script src="geo.js"></script>
  20.          
  21.             
  22.                 
  23.         
  24. <!-- **************************SCRIPT PARA PONER LA IMAGEN CARGADA ANTERIORMENTE  ***********************-->        
  25.         
  26.         
  27.         <script type="text/javascript"> 
  28.             var objeto;
  29.             var resultado;
  30.             
  31.            // var objeto2;
  32.             //var resultado2;
  33.                 
  34.         function cargar(){  
  35.             
  36.             resultado = localStorage.getItem('miObjeto');
  37.             objeto = JSON.parse(resultado);
  38.                  //document.write(objeto);
  39.             //resultado2 = localStorage.getItem('miObjeto2');
  40.             //objeto2 = JSON.parse(resultado2);
  41.            }
  42.           
  43.         function cargador(){
  44.             
  45.             resultado2 = localStorage.getItem('miObjeto2');
  46.             objeto2 = JSON.parse(resultado2);
  47.                
  48.         }
  49.         
  50.          
  51.         function cargado(){
  52.             resultado2 = localStorage.getItem('miObjeto2');
  53.             objeto2 = JSON.parse(resultado2);
  54.                    
  55.             
  56.         }    
  57.             
  58.         function imagenes(){
  59.             if (objeto == 1) && (objeto2 == 1){document.images["matrix"].src ="img/rambo.jpg"}
  60.             if (objeto == 2) && (objeto2 == 1){document.images["matrix"].src ="img/evento.jpg"}
  61.             if (objeto == 3)&& (objeto2 == 2){document.images["matrix"].src ="img/sinfonica.jpg"}
  62.             if (objeto == 4)&& (objeto2 == 2){document.images["matrix"].src ="img/capacitaciones.png"}
  63.    
  64.            }
  65.        
  66.            
  67.         </script>    
  68.         
  69.     </head>
  70.  
  71.     <body onload="initialize(),imagenes()">
  72.         
  73.         
  74.         
  75.         <div id="cajaheader"></div>
  76.         <div id=principal>
  77.             <header>
  78.                 
  79.                 
  80.                 <h1> MEETPLACE </h1>
  81.                 <div id="buscador"></div>
  82.                 
  83.             </header>
  84.         </div> 
  85.         
  86.         <section3>
  87.             
  88.            <div id="map_canvas" ></div> 
  89.                 
  90.                         
  91.             <div id="fotoevento">
  92.             
  93.                 <a href="#"><img src="" id="matrix" style="position:absolute; width:100%; height: 100%;" /></a>
  94.             
  95.             </div>
  96.             
  97.             <div id="descripcion">
  98.                 <script type="text/javascript"> 
  99.                     var objeto;
  100.                     var resultado;
  101.                     
  102.                
  103.                     resultado = localStorage.getItem('miObjeto');
  104.                     objeto = JSON.parse(resultado);
  105.                     
  106.                     if (objeto == 1){document.write('<p> hola tralalalalalalalallsd aosdjie a ererere</p>')}
  107.                     
  108.                 </script>
  109.             </div>
  110.             
  111.             <div id="arreglaperfil"></div>
  112.             
  113.         </section3>
  114.             
  115.            
  116.         
  117.         <article2>
  118.             
  119.            
  120.                 
  121.         </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.