almacenamiento web
TRANSCRIPT
Almacenamiento Web
URL: http://goo.gl/3qd9xk
Javier Adrián Barragán Olivas No: 10410537
Erick Saldívar RegaladoNo: 10410075
03-Septiembre-2014
Portada…………………………………………………………………………………………………..
1 Marco Teórico……………………………………………………………………….........................3 Resultado…………………………………………………………………………………….........4-
22 Conclusión…………………………………………………………………………………………...23 Referencia……………………………………………………………………………………………23
Agenda
Cuando los desarrolladores web quieren almacenar cualquier información del usuario, piensan inmediatamente en subir datos al servidor. Esto ha cambiado con HTML5, ya que actualmente existen varias tecnologías que permiten que las aplicaciones almacenen datos del lado del cliente.
Marco Teórico
¿Qué es el almacenamiento web?
Un servicio web o hоsting es un tipo de servicio de alojamiento de Internet que permite a individuos y organizaciones hacer que su sitio web sea accesible a través de la World Wide Web (www).
¿Qué es HTML5 de almacenamiento Web?
Con HTML5, las páginas web pueden almacenar datos localmente en el navegador del usuario.Anteriormente, esto se hizo con las cookies. También es posible almacenar grandes cantidades de datos, sin afectar el rendimiento de la página web. Su almacenamiento se hace en Key / Value pairs.
Hay varias razones por las que puede ser recomendable utilizar el almacenamiento en el cliente
El almacenamiento en el cliente permite que una aplicación funcione cuando el usuario no está conectado, posiblemente sincronizando datos cuando vuelve a establecer conexión
En primer lugar
En segundo lugar
Aumenta el rendimiento, por lo que se puede mostrar una gran cantidad de datos en cuanto el usuario hace clic en el sitio en lugar de esperar a que vuelvan a descargarse.
En tercer lugar
Es un modelo de programación más sencillo que no requiere infraestructura de servidor
Desventaja
Los datos son más vulnerables y el usuario no puede acceder a ellos desde varios clientes, por lo que solo se debe utilizar para datos que no sean muy importantes
HTML5 de almacenamiento Web Objects
El almacenamiento Web de HTML5 ofrece dos nuevos objetos para el almacenamiento de datos en el cliente:
• window.localStorage - Almacén de datos sin fecha de caducidad
• code.sessionStorage - La información se pierde una vez se cierra el browser.
Antes de utilizar el almacenamiento web, hay comprobar la compatibilidad con exploradores para localStorage y sessionStorage:
if(typeof(Storage) !== "undefined") { // Lo soporta} else { // No lo soporta}
El objeto localStorage
Almacena los datos sin fecha de caducidad. No se eliminarán los datos cuando el navegador se cierra, y estarán disponibles al día siguiente, semana o año.
Ejemplo <!DOCTYPE html><html><body>
<div id="result"></div>
<script>// Check browser supportif (typeof(Storage) != "undefined") { // Store localStorage.setItem("lastname", "Smith"); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname");} else { document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";}</script>
</body></html>
Para eliminar
La sintaxis para eliminar el elemento "apellido" es el siguiente:localStorage.removeItem("lastname");
El objeto sessionStorage
El objeto sessionStorage es igual al objeto localStorage, excepto que almacena los datos para una sola sesión. Los datos se eliminan cuando el usuario cierra la ventana del navegador.
El siguiente ejemplo se cuenta el número de veces que un usuario ha hecho clic en un botón, en la sesión actual:
Ejemplo<!DOCTYPE html><html><head><script>function clickCounter() { if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session."; } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage..."; }}</script></head><body><p><button onclick="clickCounter()" type="button">Click me!</button></p><div id="result"></div><p>Click the button to see the counter increase.</p><p>Close the browser tab (or window), and try again, and the counter is reset.</p></body></html>
Enseguida se implementa un ejemplo para cada tipo de almacenamiento, que de hecho se manejan de la misma forma, la única diferencia es la durabilidad de los datos en el browser del usuario.
<script> function AlmacenarLocalStorage(nombre) { if (typeof(Storage) !== "undefined") { localStorage.Nombre = nombre; } else { document.getElementById("localStorage").innerHTML = "Su navegador no soporta web storage."; } }function ObtenerLocalStorage() { document.getElementById("localStorage").innerHTML = localStorage.Nombre; // localStorage.removeItem("Nombre"); } function AlmacenarSessionStorage(apellido) { if (typeof (Storage) !== "undefined") { sessionStorage.Apellido = apellido; } else { document.getElementById("SessionStorage").innerHTML = "Su navegador no soporta web storage."; } } function ObtenerSessionStorage() { document.getElementById("SessionStorage").innerHTML = sessionStorage.Apellido; } </script>
<h2>Local Storage</h2> <form> <input type="text" id="txtNombre"/> <input type="button" id="btnAlmacenar" value="Almacenar en Local Storage" onclick="AlmacenarLocalStorage(document.getElementById('txtNombre').value);" /> <button id="btnSubmit">Generar Submit</button> <input type="button" id="btnObtener" value="Recuperar Local Storage" onclick="ObtenerLocalStorage();"/> <div id="localStorage"></div> </form> <h2>Session Storage</h2> <form> <input type="text" id="txtApellido" /> <input type="button" id="btnAlmacenar2" value="Almacenar en Session Storage" onclick="AlmacenarSessionStorage(document.getElementById('txtApellido').value);" /> <button id="btnSubmit2">Generar Submit</button> <input type="button" id="btnObtener2" value="Recuperar Session Storage" onclick="ObtenerSessionStorage();" /> </form>
Conclusión
HTML5 proporciona una forma de almacenar información en el navegador, similar a como lo hacen las Cookies, esto ha sido gran ventaja para el almacenamiento en la web y sobre todo para mejor manejo de datos en la web.No hubo contratiempo.Tiempo aproximado de realización:8hrs.
Referencias:http://www.html5rocks.com/es/features/storagehttp://www.elwebmaster.com/general/almacenamiento-web-html5http://msdn.microsoft.com/es-es/library/dn194486.aspx