Foros del Web » Programando para Internet » Javascript »

FAQ: Como crear variables de sesion en JavaScript

Estas en el tema de FAQ: Como crear variables de sesion en JavaScript en el foro de Javascript en Foros del Web. Bueno, un compa me dijo que se podia, por lo tanto me dio el link y nos dimos a la tarea de pillar como es ...
  #1 (permalink)  
Antiguo 21/05/2009, 13:28
Avatar de lobo_php  
Fecha de Ingreso: noviembre-2007
Ubicación: Cali-Colombia
Mensajes: 1.869
Antigüedad: 16 años, 5 meses
Puntos: 75
De acuerdo FAQ: Como crear variables de sesion en JavaScript

Bueno, un compa me dijo que se podia, por lo tanto me dio el link y nos dimos a la tarea de pillar como es el cuento, yo modifique un poco el cuento,,, para poder mostrar un inicio de sesion.

primero que todo debes tener este archivo: (ya le hice las modificaciones)
--- lo pongo mas abajo que aca no me alcanza.


por lo que pueden ver, no lo hice yo, ya estaba elaborado, el link es este:
http://www.thomasfrank.se/sessionvars.html

luego de eso,,, pueden empeszar a iniciar sesion,,, aun no esta autenticada en este ejemplo, el cual consta de dos archivos:

1. sessvarTestPage1.html

Código html:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
  2. <title>sessvars test page 1</title>
  3. <script type="text/javascript" src="sessvars.js"></script>
  4. <script type="text/javascript">
  5.  
  6. //sessvars.$.debug();
  7. sessvars.$.finalizar();
  8.  
  9. sessvars.pageCount=sessvars.pageCount||0;
  10. sessvars.pageCount++;
  11.  
  12. onload=function(){
  13.     c=document.getElementById('cabecera');
  14. };
  15. setName=function(f){
  16.     sessvars.username=document.getElementById(f).value;
  17.     document.getElementById('cabecera').style.display="none";
  18.     alert('Welcome to this test of sessvars.js, '+sessvars.username+'!');
  19.     location.href="sessvarsTestPage2.html"
  20. };
  21.  
  22.  
  23. </head>
  24. <body style="font-family:Verdana,Arial,Helvetica;font-size:12px">
  25.     <div id="cabecera"></div>
  26. <br><br><center>aqui el resto de la pagina</center>
  27. </body>
  28. </html>

y:
2. sessvarTestPage2.html

Código html:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
  2. <title>sessvars test page 1</title>
  3. <script type="text/javascript" src="sessvars.js"></script>
  4. <script type="text/javascript">
  5.  
  6. //sessvars.$.debug();
  7. sessvars.$.finalizar2();
  8.  
  9. sessvars.pageCount=sessvars.pageCount||0;
  10. sessvars.pageCount++;
  11.  
  12. onload=function(){
  13.     c=document.getElementById('cabecera');
  14. };
  15. setName=function(f){
  16.     sessvars.username=document.getElementById(f).value;
  17.     document.getElementById('cabecera').style.display="none";
  18.     alert('Welcome to this test of sessvars.js, '+sessvars.username+'!');
  19.     location.href="sessvarsTestPage2.html"
  20. };
  21.  
  22.  
  23. </head>
  24. <body style="font-family:Verdana,Arial,Helvetica;font-size:12px">
  25.     <div id="cabecera"></div>
  26. <br><br><center>aqui el resto de la pagina</center>
  27. </body>
  28. </html>

por lo que observan son practicamente iguales, la diferencia es que de sessionvar toman otra funcion, finalizar() o finalizar2()

---------------

ojala les guste, lo prueben, lo modifiquen y lo posteen nuevamente para que todos podamos usar estas variables de session en javascript q a veces son muy necesarias.
__________________
Cabuntu.org - Difundiendo Software Libre en Cali, Colombia
Usuario Linux # 483175

Última edición por lobo_php; 21/05/2009 a las 14:18
  #2 (permalink)  
Antiguo 21/05/2009, 13:29
Avatar de lobo_php  
Fecha de Ingreso: noviembre-2007
Ubicación: Cali-Colombia
Mensajes: 1.869
Antigüedad: 16 años, 5 meses
Puntos: 75
Respuesta: Como crear variables de sesion en JavaScript

este es el js:

Código javascript:
Ver original
  1. sessvars=function(){
  2.  
  3.     var x={};
  4.    
  5.     x.$={
  6.         prefs:{
  7.             memLimit:2000,
  8.             autoFlush:true,
  9.             crossDomain:false,
  10.             includeProtos:false,
  11.             includeFunctions:false
  12.         },
  13.         parent:x,
  14.         clearMem:function(){
  15.             for(var i in this.parent){if(i!="$"){this.parent[i]=undefined}};
  16.             this.flush();
  17.         },
  18.         usedMem:function(){
  19.             x={};
  20.             return Math.round(this.flush(x)/1024);
  21.         },
  22.         usedMemPercent:function(){
  23.             return Math.round(this.usedMem()/this.prefs.memLimit);
  24.         },
  25.         flush:function(x){
  26.             var y,o={},j=this.$$;
  27.             x=x||top;
  28.             for(var i in this.parent){o[i]=this.parent[i]};
  29.             o.$=this.prefs;
  30.             j.includeProtos=this.prefs.includeProtos;
  31.             j.includeFunctions=this.prefs.includeFunctions;
  32.             y=this.$$.make(o);
  33.             if(x!=top){return y.length};
  34.             if(y.length/1024>this.prefs.memLimit){return false}
  35.             x.name=y;
  36.             return true;
  37.         },
  38.         getDomain:function(){
  39.                 var l=location.href
  40.                 l=l.split("///").join("//");
  41.                 l=l.substring(l.indexOf("://")+3).split("/")[0];
  42.                 while(l.split(".").length>2){l=l.substring(l.indexOf(".")+1)};
  43.                 return l
  44.         },
  45.         finalizar2:function(t){
  46.             var t=t||this,a=arguments.callee;
  47.             if(!document.body){setTimeout(function(){a(t)},200);return};
  48.             t.flush();
  49.             var d=document.getElementById("cabecera");
  50.             if(!d){d=document.createElement("div");document.body.insertBefore(d,document.body.firstChild)};
  51.             d.id="cabecera";
  52.             if(sessvars.username){
  53.             d.innerHTML='<div align="right" style="font-size:11px;font-family:Verdana,Arial,Helvetica;>'+
  54.                         '<b style="font-family:Trebuchet MS;font-size:20px"></b>Bienvenido, '+sessvars.username+
  55.                         '<span style="cursor:pointer"><b>[Cerrar sesion]</b></span><br/>'+
  56.                         '</div>';
  57.             d.getElementsByTagName('span')[0].onclick=function(){t.clearMem();location.reload()}
  58.             }
  59.             else{
  60.                 d.innerHTML="<div align='right'><form <form id='iniciar' style='display:none;margin:0px;margin-bottom:12px' action='sessvarsTestPage2.html' method='get' onsubmit='setName(this);return false;'>"+
  61.                         "Nombre: <input style='height:22px;' widht='20' type='text' id='user'> Contrase&ntilde;a: <input style='height:22px' type='password' id='password'>"+
  62.                         "<input type='button' value='Iniciar' onClick='setName(\"user\");return false'>"+
  63.                         "</form>"+
  64.                         "</div>";
  65.             }
  66.         },finalizar:function(t){
  67.             var t=t||this,a=arguments.callee;
  68.             if(!document.body){setTimeout(function(){a(t)},200);return};
  69.             t.flush();
  70.             var d=document.getElementById("cabecera");
  71.             if(!d){d=document.createElement("div");document.body.insertBefore(d,document.body.firstChild)};
  72.             d.id="cabecera";
  73.             if(sessvars.username){
  74.             d.innerHTML='<div align="right" style="font-size:11px;font-family:Verdana,Arial,Helvetica;>'+
  75.                         '<b style="font-family:Trebuchet MS;font-size:20px"></b>Bienvenido, '+sessvars.username+
  76.                         '<span style="cursor:pointer"><b>[Cerrar sesion]</b></span><br/>'+
  77.                         '</div>';
  78.             d.getElementsByTagName('span')[0].onclick=function(){t.clearMem();location.reload()}
  79.             }
  80.             else{
  81.                 d.innerHTML="<div align='right'><form <form id='iniciar' style='display:none;margin:0px;margin-bottom:12px' action='sessvarsTestPage2.html' method='get' onsubmit='setName(this);return false;'>"+
  82.                         "Nombre: <input style='height:22px;' widht='20' type='text' id='user'> Contrase&ntilde;a: <input style='height:22px' type='password' id='password'>"+
  83.                         "<input type='button' value='Iniciar' onClick='setName(\"user\");return false'>"+
  84.                         "</form>"+
  85.                         "</div>";
  86.             }
  87.         },
  88.         debug:function(t){
  89.             var t=t||this,a=arguments.callee;
  90.             if(!document.body){setTimeout(function(){a(t)},200);return};
  91.             t.flush();
  92.             var d=document.getElementById("sessvarsDebugDiv");
  93.             if(!d){d=document.createElement("div");document.body.insertBefore(d,document.body.firstChild)};
  94.             d.id="sessvarsDebugDiv";
  95.             d.innerHTML='<div style="line-height:20px;padding:5px;font-size:11px;font-family:Verdana,Arial,Helvetica;'+
  96.                         'z-index:10000;background:#FFFFCC;border: 1px solid #333;margin-bottom:12px">'+
  97.                         '<b style="font-family:Trebuchet MS;font-size:20px">sessvars.js - debug info:</b><br/><br/>'+
  98.                         'Memory usage: '+t.usedMem()+' Kb ('+t.usedMemPercent()+'%)&nbsp;&nbsp;&nbsp;'+
  99.                         '<span style="cursor:pointer"><b>[Clear memory]</b></span><br/>'+
  100.                         top.name.split('\n').join('<br/>')+'</div>';
  101.             d.getElementsByTagName('span')[0].onclick=function(){t.clearMem();location.reload()}
  102.         },
  103.         init:function(){
  104.             var o={}, t=this;
  105.             try {o=this.$$.toObject(top.name)} catch(e){o={}};
  106.             this.prefs=o.$||t.prefs;
  107.             if(this.prefs.crossDomain || this.prefs.currentDomain==this.getDomain()){
  108.                 for(var i in o){this.parent[i]=o[i]};
  109.             }
  110.             else {
  111.                 this.prefs.currentDomain=this.getDomain();
  112.             };
  113.             this.parent.$=t;
  114.             t.flush();
  115.             var f=function(){if(t.prefs.autoFlush){t.flush()}};
  116.             if(window["addEventListener"]){addEventListener("unload",f,false)}
  117.             else if(window["attachEvent"]){window.attachEvent("onunload",f)}
  118.             else {this.prefs.autoFlush=false};
  119.         }
  120.     };
  121.    
  122.     x.$.$$={
  123.         compactOutput:false,       
  124.         includeProtos:false,    
  125.         includeFunctions: false,
  126.         detectCirculars:true,
  127.         restoreCirculars:true,
  128.         make:function(arg,restore) {
  129.             this.restore=restore;
  130.             this.mem=[];this.pathMem=[];
  131.             return this.toJsonStringArray(arg).join('');
  132.         },
  133.         toObject:function(x){
  134.             if(!this.cleaner){
  135.                 try{this.cleaner=new RegExp('^("(\\\\.|[^"\\\\\\n\\r])*?"|[,:{}\\[\\]0-9.\\-+Eaeflnr-u \\n\\r\\t])+?$')}
  136.                 catch(a){this.cleaner=/^(true|false|null|\[.*\]|\{.*\}|".*"|\d+|\d+\.\d+)$/}
  137.             };
  138.             if(!this.cleaner.test(x)){return {}};
  139.             eval("this.myObj="+x);
  140.             if(!this.restoreCirculars || !alert){return this.myObj};
  141.             if(this.includeFunctions){
  142.                 var x=this.myObj;
  143.                 for(var i in x){if(typeof x[i]=="string" && !x[i].indexOf("JSONincludedFunc:")){
  144.                     x[i]=x[i].substring(17);
  145.                     eval("x[i]="+x[i])
  146.                 }}
  147.             };
  148.             this.restoreCode=[];
  149.             this.make(this.myObj,true);
  150.             var r=this.restoreCode.join(";")+";";
  151.             eval('r=r.replace(/\\W([0-9]{1,})(\\W)/g,"[$1]$2").replace(/\\.\\;/g,";")');
  152.             eval(r);
  153.             return this.myObj
  154.         },
  155.         toJsonStringArray:function(arg, out) {
  156.             if(!out){this.path=[]};
  157.             out = out || [];
  158.             var u; // undefined
  159.             switch (typeof arg) {
  160.             case 'object':
  161.                 this.lastObj=arg;
  162.                 if(this.detectCirculars){
  163.                     var m=this.mem; var n=this.pathMem;
  164.                     for(var i=0;i<m.length;i++){
  165.                         if(arg===m[i]){
  166.                             out.push('"JSONcircRef:'+n[i]+'"');return out
  167.                         }
  168.                     };
  169.                     m.push(arg); n.push(this.path.join("."));
  170.                 };
  171.                 if (arg) {
  172.                     if (arg.constructor == Array) {
  173.                         out.push('[');
  174.                         for (var i = 0; i < arg.length; ++i) {
  175.                             this.path.push(i);
  176.                             if (i > 0)
  177.                                 out.push(',\n');
  178.                             this.toJsonStringArray(arg[i], out);
  179.                             this.path.pop();
  180.                         }
  181.                         out.push(']');
  182.                         return out;
  183.                     } else if (typeof arg.toString != 'undefined') {
  184.                         out.push('{');
  185.                         var first = true;
  186.                         for (var i in arg) {
  187.                             if(!this.includeProtos && arg[i]===arg.constructor.prototype[i]){continue};
  188.                             this.path.push(i);
  189.                             var curr = out.length;
  190.                             if (!first)
  191.                                 out.push(this.compactOutput?',':',\n');
  192.                             this.toJsonStringArray(i, out);
  193.                             out.push(':');                    
  194.                             this.toJsonStringArray(arg[i], out);
  195.                             if (out[out.length - 1] == u)
  196.                                 out.splice(curr, out.length - curr);
  197.                             else
  198.                                 first = false;
  199.                             this.path.pop();
  200.                         }
  201.                         out.push('}');
  202.                         return out;
  203.                     }
  204.                     return out;
  205.                 }
  206.                 out.push('null');
  207.                 return out;
  208.             case 'unknown':
  209.             case 'undefined':
  210.             case 'function':
  211.                 if(!this.includeFunctions){out.push(u);return out};
  212.                 arg="JSONincludedFunc:"+arg;
  213.                 out.push('"');
  214.                 var a=['\n','\\n','\r','\\r','"','\\"'];
  215.                 arg+=""; for(var i=0;i<6;i+=2){arg=arg.split(a[i]).join(a[i+1])};
  216.                 out.push(arg);
  217.                 out.push('"');
  218.                 return out;
  219.             case 'string':
  220.                 if(this.restore && arg.indexOf("JSONcircRef:")==0){
  221.                     this.restoreCode.push('this.myObj.'+this.path.join(".")+"="+arg.split("JSONcircRef:").join("this.myObj."));
  222.                 };
  223.                 out.push('"');
  224.                 var a=['\n','\\n','\r','\\r','"','\\"'];
  225.                 arg+=""; for(var i=0;i<6;i+=2){arg=arg.split(a[i]).join(a[i+1])};
  226.                 out.push(arg);
  227.                 out.push('"');
  228.                 return out;
  229.             default:
  230.                 out.push(String(arg));
  231.                 return out;
  232.             }
  233.         }
  234.     };
  235.    
  236.     x.$.init();
  237.     return x;
  238. }()
__________________
Cabuntu.org - Difundiendo Software Libre en Cali, Colombia
Usuario Linux # 483175
  #3 (permalink)  
Antiguo 21/05/2009, 13:44
Avatar de sneyder05  
Fecha de Ingreso: enero-2009
Ubicación: Cali
Mensajes: 172
Antigüedad: 15 años, 3 meses
Puntos: 17
De acuerdo Respuesta: Como crear variables de sesion en JavaScript

Esta libreria me sera muy util, estaba buscando algo como esto, gracias lobo_php, es un muy buen post.

Salu2
  #4 (permalink)  
Antiguo 21/05/2009, 13:48
Avatar de lobo_php  
Fecha de Ingreso: noviembre-2007
Ubicación: Cali-Colombia
Mensajes: 1.869
Antigüedad: 16 años, 5 meses
Puntos: 75
Respuesta: Como crear variables de sesion en JavaScript

todo bien, si ves algo que nos puede servir a todos no mas es q lo postees, a proposito, las funciones finalizar y finalizar2 no quiere decir que se finalicen, les puse asi por que al principio solo buscaba finalizar la sesion, y ahi segui metiendo todo, el js debe llamarse en este ejemplo: sessvars.js
__________________
Cabuntu.org - Difundiendo Software Libre en Cali, Colombia
Usuario Linux # 483175
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:21.