Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje16-07-2011, 18:28 (UTC)    
Título del mensaje: [Tutorial]Aprende a guardar informacion del lado cliente

Esta funcion es la que uso para recordar la configuracion que elejiste
Tratare de enseñar como es posible guardar,editar y eliminar informacion en el ordenador del visitante por medio de LocalStorage

¿ Recuerdas las COOKIES ? Pues resulta que hace un par de años, ellas eran la unica forma de guardar informacion, con un limite de 100 KB por dominio (por pagina) Ademas, cada vez que se recargaba la pagina, todas las cookies eran enviadas de vuelta al servidor retrasando la velocidad de nuestra web.
Y todavia !, escribir, editar o eliminar cookies con javascript era algo batalloso (mucho codigo).

Pues Javascript trae esta nueva poderosa funcion de guardar informacion, ademas tiene un limite de hasta 5MB por dominio, lo que es mucho si hablamos de texto(comunmente el texto pesa KB). Antes de exponer ejemplos, te contare para que puedes usar informacion guardada:

Podras:
Recordar el nombre de visitante (darle bienvenida personalizada)

Recordar Tamaño de letra que le gusta.

Recordar email,nombre o web (para rellenar campos de formularios)

Recordar cuantas veces ha visitado tu web (".....Hasta ahora has visitado mi web X veces")

Recordar estilo de pagina que le gusta (por ejemplo tamaño de letra, color de fondo, fuente,color de letra)



**Los usos que tu le des pueden ser muchos, siempre dependiendo de tu ingenio**

---------------------------------Empezemos---------------------------------

Para poder empezar necesitaremos saber si el navegador soporta LocalStorage, con una simple condicion de Javascript:
Cita:
if (LocalStorage)
{
/* Si la condicion devuelve Verdadero aqui podremos crear nuestro codigo*/
} else {
/* Aqui podemos lanzar un mensaje explicando que no tiene soporte para LS*/
}

Abajo una imagen de la compatibilidad de esta funcion LocalStorage
http://img.webme.com/pic/a/adan-2994/ls.jpg

---------------------------------Guardando informacion---------------------------------

Hasta ahora conozco dos maneras de hacerlo.
Cita:
localStorage.setItem('Nombre','Valor');

/* Segunda manera*/

localStorage['Nombre']='Valor';

Yo prefiero usar la segunda manera.

Ejercicio: Preguntar al visitante su nombre y guardarlo.
Cita:
<script>

var nombre=prompt("Cual es tu nombre");
localStorage['nombreVisitante']=nombre;
/*
tambien funciona de esta manera
localStorage.setItem('nombreVisitante',nombre);
*/


</script>


De esta manera creamos una nueva variable que se guardara en el ordenador del visitante con el valor del nombre.

---------------------------------Leer informacion del LocalStorage---------------------------------
Tambien conozco dos maneras para leer informacion del LS, las cuales son facil de aprender.
Cita:
localStorage.getItem('Nombre')

/* Segunda manera y la que yo uso*/


localStorage['Nombre']


De esta maneera podras asignar valores a tus variables utilizando algo asi:
Cita:
var nombre=localStorage['minombre'];



Ejercicio: Mostrar un mensaje con el nombre del visitante dado en el ejercicio anterior
Cita:
<script>

var nombre=prompt("Cual es tu nombre");
localStorage['nombreVisitante']=nombre;
/*
tambien funciona de esta manera
localStorage.setItem('nombreVisitante',nombre);
*/


alert(localStorage['nombreVisitante']);
/*tambien puedes usar
alert(localStorage.getItem('nombreVisitante'));
*/

</script>

Cita:

Atencion:
Es necesario saber si una variable del LocalStorage existe antes de usarla.
Esto se logra mediante una condicion en javascript:
if (localStorage['variable'] != undefined )
{
/*la variable si existe*/
}



---------------------------------Editar y eliminar informacion del LocalStorage---------------------------------

Para cambiarle el valor a una variable del LS ya guardada por otro cualquiera, se hace como si estuvieras creandola por primera vez.
Cita:
/* aqui creamos y asignamos un valor*/
localStorage['variable']="Primer valor";

/* aqui cambiamos el valor*/

localStorage['variable']="Segundo valor";

Para eliminar informacion:
Cita:
localStorage.removeItem('Nombre');

De esa manera eliminamos el elemento 'Nombre'.

Ejercicio:Eliminar el nombre del visitante dado en los ejercicios anteriores

Cita:

<script>

var nombre=prompt("Cual es tu nombre");
localStorage['nombreVisitante']=nombre;

alert(localStorage['nombreVisitante']);

/*
una ves que guardamos y mostramos el nombre del visitante lo eliminamos
*/

localStorage.removeItem('nombreVisitante');

</script>


Asi de fail es !
si tienes dudas comenta



Fuente: Proyectos Adan-Diseñando con Estilo
.
.
.
.
.
______________
COLECCION DE EMOTIKONOS PARA TU WEB PWG


Ultima edición por adan-2994 el Sab Jul 16, 2011 2:32 pm; editado 2 veces
Mensaje17-07-2011, 21:34 (UTC)    
Título del mensaje: Re: [Tutorial]Aprende a guardar informacion del lado cliente

No juro que lo lei 2 veces y no entendi nada :_
Mensaje17-07-2011, 21:38 (UTC)    
Título del mensaje:

La verdad si lo lei como 4 veces y no logro entender nada
______________
Twitter ZoneFacil
Facebook ZoneFacil
Mensaje17-07-2011, 22:22 (UTC)    
Título del mensaje:

zonefacil escribió:
La verdad si lo lei como 4 veces y no logro entender nada

jaja
Mensaje17-07-2011, 22:35 (UTC)    
Título del mensaje:

Que esto hace que guardes contraseñas usuarios en ves de cookies que dan 100 mb y con esto te aumenta más.

Buen tuto Adan
______________
Off
Mensaje17-07-2011, 22:45 (UTC)    
Título del mensaje:

fafo-ayuda escribió:
Que esto hace que guardes contraseñas usuarios en ves de cookies que dan 100 mb y con esto te aumenta más.

Buen tuto Adan


Pero es casi Inecesario , pero bueno .
Mensaje17-07-2011, 22:59 (UTC)    
Título del mensaje:

brianpwg escribió:
fafo-ayuda escribió:
Que esto hace que guardes contraseñas usuarios en ves de cookies que dan 100 mb y con esto te aumenta más.

Buen tuto Adan


Pero es casi Inecesario , pero bueno .


?????????????????????????????????????
Inesesario !! ?
Lo que sucede es que no sabes ni siquiera de que trata el codigo
pasate por esta tema con un ejemplo :http://www.paginawebgratis.es/forum/viewtopic.php?p=335502#335502
Y de que sea inutil o no depende del uso que le des, yo lo uso para guardar la configuracion del visitante,
asi ellos pueden cambiarle la letra o color de fondo a mi web
______________
COLECCION DE EMOTIKONOS PARA TU WEB PWG
Mensaje17-07-2011, 23:20 (UTC)    
Título del mensaje:

Tinee razon brian es casi innesesario :s
Ahy a muchas personas q los cookis no se los guarda y solo guardan passwords porque es una configuracion del ordenador :D
Mensaje17-07-2011, 23:43 (UTC)    
Título del mensaje:

adan-2994 escribió:
brianpwg escribió:
fafo-ayuda escribió:
Que esto hace que guardes contraseñas usuarios en ves de cookies que dan 100 mb y con esto te aumenta más.

Buen tuto Adan


Pero es casi Inecesario , pero bueno .


?????????????????????????????????????
Inesesario !! ?
Lo que sucede es que no sabes ni siquiera de que trata el codigo
pasate por esta tema con un ejemplo :http://www.paginawebgratis.es/forum/viewtopic.php?p=335502#335502
Y de que sea inutil o no depende del uso que le des, yo lo uso para guardar la configuracion del visitante,
asi ellos pueden cambiarle la letra o color de fondo a mi web


Para que te enojas ? solo di MI opinio , no te enojes , si para ti es necesario , para mi no .
Mensaje17-07-2011, 23:46 (UTC)    
Título del mensaje:

guias-programas escribió:
Tinee razon brian es casi innesesario :s
Ahy a muchas personas q los cookis no se los guarda y solo guardan passwords porque es una configuracion del ordenador :D

NO SON COOKIES
Y por que innesesario ? pues por que no sabes darle un buen uso ( o no se tiene el conocimiento)
______________
COLECCION DE EMOTIKONOS PARA TU WEB PWG
Mensaje18-07-2011, 02:21 (UTC)    
Título del mensaje:

Muy bien adan :D

Sabes siempre tus temas son geniales unicos y perfectos :D

espero que vengas a por mas :D
______________
Mensaje18-07-2011, 02:29 (UTC)    
Título del mensaje:

adan-2994 escribió:
guias-programas escribió:
Tinee razon brian es casi innesesario :s
Ahy a muchas personas q los cookis no se los guarda y solo guardan passwords porque es una configuracion del ordenador :D

NO SON COOKIES
Y por que innesesario ? pues por que no sabes darle un buen uso ( o no se tiene el conocimiento)


Creo q no entendistes Mi respuesta :/

Saluds
Mensaje18-07-2011, 03:20 (UTC)    
Título del mensaje:

o.O Adan, esto solo lo sabia con php, ahora se que se puede con JS, y no es innecesario hace mas facil las vista de la web y creo que la carga mas rapido es lo que eh notado en otras webs que tengo con el php que la hago

Salu2
______________
Miguel García | Desarrollador web freelance
Mensaje18-07-2011, 03:27 (UTC)    
Título del mensaje:

Esta excelente esta forma de guardar información del lado cliente con solo javascript, sin duda lo tomaré en cuenta para un futuro.

Gracias y muy buen tuto,
Team-Soporte.
______________
Team-Soporte.
Moderador de PaginaWebGratis.es

www.team-soporte.es.tl | @jeremymolina
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group