| Autor |
Mensaje |
-
adan-2994
Junior
|
 16-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>
Ultima edición por adan-2994 el Sab Jul 16, 2011 2:32 pm; editado 2 veces
|
|
|
↑
|
|
 |
-
brianpwg
Semi-Experto
|
17-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 :_ |
|
|
↑
|
|
|
-
zonefacil
Junior
|
17-07-2011, 21:38 (UTC)
Título del mensaje: |
|
|
|
|
|
↑
|
|
|
-
brianpwg
Semi-Experto
|
17-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 |
|
|
↑
|
|
|
-
fafo-ayuda
Semi-Experto
Ubicación: PaginaWebGratis.Es
|
17-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 |
|
|
↑
|
|
|
-
brianpwg
Semi-Experto
|
17-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 . |
|
|
↑
|
|
|
-
adan-2994
Junior
|
17-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
 |
|
|
↑
|
|
|
-
guias-programas
Semi-Experto
Ubicación: Argentina - Bs.As
|
17-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 |
|
|
↑
|
|
|
-
brianpwg
Semi-Experto
|
17-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 . |
|
|
↑
|
|
|
-
adan-2994
Junior
|
17-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
|
|
|
↑
|
|
|
-
ferchi
Junior
|
18-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 ______________  |
|
|
↑
|
|
|
-
guias-programas
Semi-Experto
Ubicación: Argentina - Bs.As
|
18-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 |
|
|
↑
|
|
|
-
solamente-sencillo
Semi-Experto
|
18-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 |
|
|
↑
|
|
|
-
team-soporte
Semi-Experto
|
18-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 |
|
|
↑
|
|
|
|
