Breaking

Post Top Ad

Your Ad Spot

martes, 10 de diciembre de 2019

¿Está disponible el almacenamiento local del navegador web?

Los navegadores web modernos nos permiten almacenar datos en el navegador del cliente: no porciones más grandes sino cantidades más pequeñas cuando sea conveniente.

Interfaz

Para almacenar los datos localStoragede JS simplemente haga:
localStorage.setItem('myCat', 'Tom');
o cualquier otro objeto (list, int, dict). Luego para recuperarlo:
let cat = localStorage.getItem('myCat');
y para eliminarlo:
localStorage.removeItem('myCat');
o para borrar todos los elementos en el almacenamiento local que pertenecen al dominio actual, estamos en:
localStorage.clear();
Hay otro objeto de almacenamiento sessionStorageLa misma interfaz que el almacenamiento local, aunque el almacenamiento de la sesión se purga una vez que el usuario abandona el sitio. Nota amistosa: evitaría almacenar datos confidenciales (personales o de seguridad) en el almacenamiento local.

Estado de almacenamiento local

Aquí está la cosa. Es posible que el almacenamiento local no esté disponible para nosotros o que esté lleno. Entonces, antes de usar el almacenamiento local en el código de nuestro sitio web, debemos verificar que podamos.

¿Se ha excedido la cuota de almacenamiento local?

Dependiendo del navegador, cierta cantidad de espacio por dominio de página web:
  • Móvil:
    • Chrome, Firefox: 10 MB
    • Safari, iOS WebView: 5 MB
    • Navegador de Android: 2 MB
  • Escritorio:
    • Chrome, Firefox, IE: 10 MB
    • Safari: 5 MB
Si llenamos este espacio con nuestra página web, no podremos agregar ningún elemento nuevo localStorage.

¿Hay almacenamiento local disponible?

Los usuarios pueden deshabilitar el uso del almacenamiento local en el navegador web. La mayoría no lo hará, pero hay suficientes geeks por ahí para causarnos problemas. Por lo tanto, debemos poder verificar si el uso del almacenamiento local está permitido.
Nota al margen: en el modo de incógnito Safari, localStorageestá bloqueado y arrojará un error de cuota excedida. Por lo tanto, es posible que deseemos verificar si el navegador está en modo incógnito para estar seguro.

Obtener el estado del almacenamiento local

Muy bien, escribamos una función que nos permita verificar si el almacenamiento local está lleno y accesible.
La siguiente función intenta establecer el objeto de prueba en el almacenamiento local y luego eliminarlo. Si ocurre un error, lo detectamos con el try catchbloque y luego analizamos lo que sucedió.
La función get_local_storage_status()nos dará el estado de localStorage:
  • lleno
  • indisponible
  • disponible
Código completo:
function get_local_storage_status() {
    let test = "test";
    try {
        // try setting an item
        localStorage.setItem("test", test);
        localStorage.removeItem("test");
    }
    catch(e)
    {   
        // browser specific checks if local storage was exceeded
        if (e.name === "QUATA_EXCEEDED_ERR" // Chrome
            || e.name === "NS_ERROR_DOM_QUATA_REACHED" //Firefox/Safari
        ) {
            // local storage is full
            return "full";
        } else {
            try{
                if(localStorage.remainingSpace === 0) {// IE
                    // local storage is full
                    return "full";
                }
            }catch (e) {
                // localStorage.remainingSpace doesn't exist
            }

            // local storage might not be available
            return "unavailable";
        }
    }   
    return "available";
}
Entonces podemos ejecutar la función con:
get_local_storage_status();
O mostrar el estado en la consola:
console.log(get_local_storage_status())
Una prueba conveniente para ver si nuestro script funciona es deshabilitar el almacenamiento local, por ejemplo en Firefox:
  • Escribir: about:configen su barra de direcciones y presione enter. Verá la configuración del navegador.
  • Busque dom.storage.enabledy cambie el estado a falseDoble clic del mouse en la configuración debería hacer el cambio.
Agregue su script a un sitio web de ejemplo y verifique el estado en el navegador consoleSi lograste configurar correctamente la configuración de Firefox, console.log(get_local_storage_status())debería darte el "unavailable"estado.

¿Cuándo es conveniente el almacenamiento local?

Muy bien, estamos equipados con el almacenamiento local. Ahora, ¿dónde nos gustaría usarlo?
Digamos que la conexión a Internet del usuario se cae y el usuario desea abandonar el sitio web. Pero algunos datos se perderán si el usuario abandona el sitio web en el modo fuera de línea. Entonces el almacenamiento local podría ayudarnos. Almacenamos datos en el almacenamiento local hasta que el usuario se vuelva a conectar a Internet con nuestro sitio web nuevamente. Nuevamente, no almacene datos confidenciales en el almacenamiento local.
Otro caso de uso del almacenamiento local sería optimizar el tiempo de carga de la página almacenando algunas partes de la página en el almacenamiento local. En la próxima carga, solo una parte de la página tendría que cargarse.
Hay un caso más que no cubrimos aquí. El navegador web del usuario no es compatible HTML5localStorageen absoluto. En ese caso bien ...

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas