🎃 Grandes descuentos en libros en línea, eformaciones y vídeos*. Código CALABAZA30. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. Aprender a desarrollar con JavaScript
  3. Almacenamiento local de datos
Extrait - Aprender a desarrollar con JavaScript Aspectos principales del uso de frameworks (4ª edición)
Extractos del libro
Aprender a desarrollar con JavaScript Aspectos principales del uso de frameworks (4ª edición)
1 opinión
Volver a la página de compra del libro

Almacenamiento local de datos

Presentación general de las soluciones

En el capítulo anterior, hemos visto cómo almacenar pequeñas cantidades de información en las cookies (4 KB como máximo).

Hay dos soluciones, llamadas Web Storage, que son alternativas al uso de cookies:

  • el almacenamiento de la sesión,

  • el almacenamiento local.

Como para las cookies, el almacenamiento con estas dos interfaces llamadas respectivamente sessionStorage y localStorage se lleva a cabo en el lado navegador. Por tanto, no hay que confundir estas dos técnicas con un almacenamiento remoto en base de datos. Además, en el próximo capítulo veremos cómo implementar este tipo de soluciones usando el protocolo SOAP (Simple Object Access Protocol), una librería PHP dedicada NuSOAP y el sistema de gestión de bases de datos MySQL.

El Web Storage, también llamado DOM Storage, apareció con HTML5. Sin embargo, este modo de almacenamiento es aceptado por la gran mayoría de los navegadores.

La ventaja principal del Web Storage respecto a las cookies es la posibilidad de almacenar una mayor cantidad de información (5 MB como máximo). Además, contrariamente a lo que sucede con las cookies, las interfaces sessionStorage y localStorage no requieren tráfico HTTP en la red. Recordemos que las cookies se guardan en el disco duro del usuario (por lo que es necesaria una transferencia HTTP), mientras que la información...

Implementación de Web Storage a través de ejemplos

Como los métodos asociados a sessionStorage y a localStorage son idénticos, en los dos ejemplos usamos localStorage.

1. Ejemplo 1: Almacenamiento por localStorage de cadenas de caracteres

En este primer ejemplo, el objetivo va a ser estudiar las posibilidades que ofrece localStorage en la gestión (creación, acceso y eliminación) de información de tipo cadenas de caracteres.

Script completo

El código fuente del script se muestra completo a continuación:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
 
<!-- 
NOMBRE DEL SCRIPT: LOCAL_STORAGE_01.htm 
REALIZACIÓN INFORMÁTICA: Christian VIGOUROUX 
FECHA DE CREACIÓN: 15/10/2018 
FECHA DE ÚLTIMA MODIFICACIÓN: 15/10/2018 
OBJETIVO: Almacenamiento usando localStorage 
--> 
 
<!-- Inicio script HTML --> 
<html> 
 
   <!-- Inicio encabezado script HTML --> 
   <head> 
 
     <!-- Etiqueta meta --> 
     <meta http-equiv="Content-Type" 
     content="text/html; charset=utf-8" /> 
 
     <!-- Título del script HTML --> 
     <title>LOCAL_STORAGE_01</title> 
 
     <!-- Inicio script JavaScript --> 
     <script type='text/javascript'> 
        
         /* Declaración de variables comunes 
         a todas las funciones */ 
         var titulo; 
         var nombrePersona; 
         var apellidosPersona; 
         var emailPersona; 
 
         /* Función escribirLocalStorage */ 
         function escribirLocalStorage()  
         { 
             /* Verifica posibilidades de usar localStorage */ 
             if (typeof localStorage != "undefined") ...