Skip to content

Latest commit

 

History

History
211 lines (176 loc) · 6.92 KB

dia36.md

File metadata and controls

211 lines (176 loc) · 6.92 KB
Raw

shieldsIO shieldsIO shieldsIO

WideImg

Master en Programación de Aplicaciones con JavaScript y Node.js

JS, Node.js, Frontend, Express, Patrones, IoT, HTML5_APIs, Asincronía, Websockets, ECMA6, ECMA7

Clase 36

LocalStorage

  • Soporte en Navegadores

  • Convencional:

    • Cookies:
    • Espacio limitado (4kb)
    • Máximo 20 cookies
    • Por cada petición HTTP se envia y recibe todo el contenido (lectura servidor)
    • Caducidad

  • Tipos:

    • SessionStorage (Solo se almacenan los datos durante la sesión)
    • LocalStorage (Almacenamiento persistente)
    • GlobalStorage (Firefox experimental - No usar)

  • Uso y limitaciones:

    • 5-10Mb según navegador
    • Almacenamiento local (lectura/escritura cliente)
    • Sin caducidad
    • Funcionamiento clave/valor
    • Solo se permite el almacenamiento de cadenas de texto.

  • Problemas Conocidos:

    • IE 8 y 9 almacena los datos basandose unicamente en el hostname, ignorando el protocolo (http/https) y el puerto.
    • En iOS 5 y 6 los datos se almacenan en una localización que puede ser borrada ocasionalmente por el SO.
    • Usando el modo "navegación privada" Safari, Safari para IOs y Navegadores Android no soportan sessionStorage o localStorage.
    • En IE al acceder a LocalStorage desde local, el objeto localStorage pasa a ser undefined.
    • Internet Explorer no soporta el almacenamiento de casi ninguna cadena de carácteres ASCII con una logitud menor a 20.
    • En IE el evento "storage" genera errores:
      • IE10 : Se dispara el evento al usar iframes.
      • IE11 : Se confunden el valor antiguo con el nuevo valor (actualizado).
    • IE10 en Windows 8 puede presentar el siguiente mensaje de error "SCRIPT5: Access is denied" if "integrity" settings are not set correctly.
    • Chrome en Local no funciona correctamente

  • Métodos de LocalStorage

    • setItem() Guardando datos
        localStorage.setItem('clave', 'valor');
    • getItem() Recuperar un valor
        console.info(localStorage.getItem('clave'));
    • length() Total de elementos
        console.info(localStorage.length);
    • removeItem() Eliminar un elemento
        localStorage.removeItem('clave');
    • clear() Eliminar todo
        localStorage.clear();

  • Comprobación

    if (window.localStorage) {
        console.info("La función Html5 localStorage está soportada");
    } else {
        console.warn('Su navegador no soporta localStorage');
    }

    if (window.sessionStorage) {
        console.info('La función Html5 sessionStorage está soportada');
    } else {
        console.warn('Su navegador no soporta sessionStorage');
    }
  • Usando json en LocalStorage
    var objeto = {
        numero: 1,
        booleano : true,
        array: ["dato", true, 2],
        cadena: "dato"
        };
    localStorage.setItem('clave', JSON.stringify(objeto));
    var objetoRecuperado = JSON.parse(localStorage.getItem('clave'));
    console.log(objetoRecuperado.booleano);

  • Eventos asociados

    • key: es la clave que se modifica
    • oldValue: es el valor anterior de la clave que se modifica
    • newValue: es el nuevo valor de la clave que se modifica
    • url: la página donde se modifica la clave
    • storageArea: el objeto donde se modifica la clave
    • Usa dos Pestañas
    • Ejemplo:
        window.addEventListener('storage', function(event){
        console.info("Se registran cambios en "+event.key+". El valor pasó de ser "+event.oldValue+" a "+event.newValue+".\nRecuerda que estas en "+event.url+" y usando el almacenamiento ", event.storageArea);
    });

  • Trucos:

    • Sacar todas las claves guardadas
         for (var key in localStorage){
        console.log(key)
     }
    • Sacar todos los valores
        for ( var i = 0; i < localStorage.length; i++ ) {
      console.log( localStorage.getItem( localStorage.key( i ) ) );
    }

ContentEditable

    if (!document.body.contentEditable) {
        console.warn("No se puede utilizar contentEditable :-(");
    } else {
        console.info("Podemos utilizar contentEditable :-)");
    }

  • Usando contentEditable

    • Atributo contentEditable (true, false, inherit)
        <!-- estilos: [contenteditable] y [contenteditable]:hover -->
    <!DOCTYPE html>
    <html>
      <body>
        <div contentEditable="true">
          Modificame... tanto como quieras!
        </div>
      </body>
    </html
    • designMode (editando todo el documento)
        window.document.designMode = "on"; // off, por defecto
        <!DOCTYPE html>
    <html>
      <body>
        <div contentEditable="true" spellcheck="true">
          Modificame... tanto como quieras!
        </div>
      </body>
    </html

Ejercicios

1 - Crear una libreta de contactos para guardar nombre y numero de telefono usando LocalStorage

  • Objetivos:
    • Guardar Nombre y telefono
    • Mostrar todos los contactos en el html
    • Botón para borrar un contacto específico
    • Botón para borrar todos los contactos
    • Botón para recuperar el telefono de un contacto
    // Tu solución

2 - Crea una libreta de contactos para guardar multiples datos.

  • Objetivos:
    • Guardar Nombre, telefono y email
    • Mostrar todos los contactos en el html
    • Botón para borrar un contacto específico
    • Botón para borrar todos los contactos
    • Botón para recuperar el telefono y email de un contacto
  • Consejos:
    • Utiliza JSON.parse() y JSON.stringify() para guardar multiples datos bajo una misma clave
    • Genera un avatar al azar para el usuario usando Adorable Avatars
    // Tu solución