El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Accediendo al Almacenamiento del Dispositivo

Siguiente ►
►

En este tema, aprenderás cómo acceder y manipular el almacenamiento del dispositivo utilizando Apache Cordova. Este conocimiento es crucial para cualquier aplicación que necesite guardar datos localmente, como configuraciones de usuario, archivos multimedia, o cualquier otro tipo de información persistente.

Conceptos Clave

  1. Tipos de Almacenamiento:

    • Almacenamiento Local (Local Storage): Ideal para guardar pequeñas cantidades de datos en formato clave-valor.
    • Sistema de Archivos (File System): Permite un control más granular y es adecuado para almacenar archivos más grandes y estructurados.

  2. Plugins de Cordova:

    • cordova-plugin-file: Este plugin proporciona una API para trabajar con el sistema de archivos del dispositivo.

Instalación del Plugin

Para trabajar con el sistema de archivos, primero necesitas instalar el plugin cordova-plugin-file. Puedes hacerlo ejecutando el siguiente comando en tu terminal:

cordova plugin add cordova-plugin-file

Uso del Almacenamiento Local

El almacenamiento local es una forma sencilla de almacenar datos en el dispositivo. Utiliza el objeto localStorage disponible en JavaScript.

Ejemplo de Almacenamiento Local

// Guardar datos en el almacenamiento local
localStorage.setItem('nombre', 'Juan');

// Recuperar datos del almacenamiento local
var nombre = localStorage.getItem('nombre');
console.log(nombre); // Salida: Juan

// Eliminar datos del almacenamiento local
localStorage.removeItem('nombre');

Ejercicio Práctico

  1. Guardar y Recuperar Datos:
    • Crea una página HTML con un formulario que permita al usuario ingresar su nombre.
    • Guarda el nombre en el almacenamiento local cuando el usuario envíe el formulario.
    • Recupera y muestra el nombre guardado cuando la página se recargue.

Solución

<!DOCTYPE html>
<html>
<head>
    <title>Almacenamiento Local</title>
</head>
<body>
    <form id="nameForm">
        <label for="name">Nombre:</label>
        <input type="text" id="name" name="name">
        <button type="submit">Guardar</button>
    </form>
    <p id="savedName"></p>

    <script>
        document.getElementById('nameForm').addEventListener('submit', function(event) {
            event.preventDefault();
            var name = document.getElementById('name').value;
            localStorage.setItem('nombre', name);
            displaySavedName();
        });

        function displaySavedName() {
            var savedName = localStorage.getItem('nombre');
            if (savedName) {
                document.getElementById('savedName').textContent = 'Nombre guardado: ' + savedName;
            }
        }

        // Mostrar el nombre guardado al cargar la página
        displaySavedName();
    </script>
</body>
</html>

Uso del Sistema de Archivos

Para trabajar con el sistema de archivos, utilizamos el plugin cordova-plugin-file. Este plugin proporciona una API para leer y escribir archivos en el dispositivo.

Ejemplo de Uso del Sistema de Archivos

document.addEventListener('deviceready', function() {
    window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function(directoryEntry) {
        directoryEntry.getFile('example.txt', { create: true, exclusive: false }, function(fileEntry) {
            // Escribir en el archivo
            fileEntry.createWriter(function(fileWriter) {
                fileWriter.onwriteend = function() {
                    console.log('Archivo escrito exitosamente.');
                };

                fileWriter.onerror = function(e) {
                    console.log('Error al escribir el archivo: ' + e.toString());
                };

                var dataObj = new Blob(['Hola, mundo!'], { type: 'text/plain' });
                fileWriter.write(dataObj);
            });

            // Leer el archivo
            fileEntry.file(function(file) {
                var reader = new FileReader();

                reader.onloadend = function() {
                    console.log('Contenido del archivo: ' + this.result);
                };

                reader.readAsText(file);
            });
        }, function(error) {
            console.log('Error al obtener el archivo: ' + error.code);
        });
    }, function(error) {
        console.log('Error al resolver el sistema de archivos: ' + error.code);
    });
});

Ejercicio Práctico

  1. Crear y Leer un Archivo:
    • Crea un archivo llamado datos.txt y escribe el texto "Datos de ejemplo" en él.
    • Lee el contenido del archivo y muéstralo en la consola.

Solución

document.addEventListener('deviceready', function() {
    window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function(directoryEntry) {
        directoryEntry.getFile('datos.txt', { create: true, exclusive: false }, function(fileEntry) {
            // Escribir en el archivo
            fileEntry.createWriter(function(fileWriter) {
                fileWriter.onwriteend = function() {
                    console.log('Archivo escrito exitosamente.');
                };

                fileWriter.onerror = function(e) {
                    console.log('Error al escribir el archivo: ' + e.toString());
                };

                var dataObj = new Blob(['Datos de ejemplo'], { type: 'text/plain' });
                fileWriter.write(dataObj);
            });

            // Leer el archivo
            fileEntry.file(function(file) {
                var reader = new FileReader();

                reader.onloadend = function() {
                    console.log('Contenido del archivo: ' + this.result);
                };

                reader.readAsText(file);
            });
        }, function(error) {
            console.log('Error al obtener el archivo: ' + error.code);
        });
    }, function(error) {
        console.log('Error al resolver el sistema de archivos: ' + error.code);
    });
});

Resumen

En esta sección, aprendiste cómo acceder y manipular el almacenamiento del dispositivo utilizando Apache Cordova. Cubrimos dos métodos principales: el almacenamiento local y el sistema de archivos. Practicamos cómo guardar y recuperar datos en el almacenamiento local y cómo crear, escribir y leer archivos en el sistema de archivos del dispositivo.

Próximos Pasos

En el siguiente tema, exploraremos cómo manejar la información de red en tu aplicación Cordova, lo que te permitirá interactuar con servicios web y APIs externas.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados