Ediciones ENI Editorial | líder en informática
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") ...