Capítulo 2

LocalStorage y SessionStorage
LocalStorage y SessionStorage son las API que nos permitirán guardar
información en la computadora del cliente. Su manejo es muy similar a las
cookies o galletas, por lo que se les conoce como “cookies con esteroides”.

Los LocalStorage son datos persistentes, es decir, si el usuario cierra el

navegador o apaga su computadora, los datos no se borran.
En cambio, los datos almacenados como SessionStorage se eliminarán
cuando se cierre el navegador o si se llega a apagar la computadora.

La compatibilidad de uso de los navegadores es la siguiente:

Verificación del objeto LocalStorage
 Almacenamiento

En la mayoría de los navegadores la capacidad de almacenamiento es de

5mb, pero puede variar de navegador a navegador y de plataforma a
plataforma.
Igual que las cookies, la información de LocalStorage y SessionStorage se
almacena por dominio, es decir, que otra página, de otro dominio, no tiene
acceso. A diferencia de las cookies, cualquier página del dominio tendrá
acceso a la información. Hay que recordar que si tenemos ingreso con
diferentes navegadores, no tendremos entrada a la información, aunque sea
del mismo dominio.
Las etiquetas HTML para crear el registro o login
 2.1 Validar el LocalStorage en el navegador
La validación de esta API se puede hacer de diferentes formas: en este caso
utilizaremos la función de JavaScript typeof(), la cual nos regresará el tipo
de datos de una variable u objeto.
También podemos usar herramientas como Modernizr.com. Cree un nuevo
archivo para HTML5 si su codificador no le genera las etiquetas. En este
archivo escribimos las etiquetas de <script> y dentro de ellas la validación
del uso de LocalStorage.
Una vez que estamos seguros que contamos con el almacenamiento local
(tanto persistente como de sesión) procedemos a verificar si existe
almacenada la información, pero antes vamos a escribir las etiquetas HTML
que nos servirán como un pequeño registro o “login”, con la opción de
guardar los datos y de recuperarlos (cosa muy rara en un login).
Cuando el usuario pulsa el botón guardar, se almacena el contenido de las
dos cajas de entrada dentro del objeto LocalStorage(), con los identificadores
correspondientes. Ahora necesitamos escribir la función recuperar().

La forma de almacenar y recuperar información en LocalStorage y

SessionStorage es bastante sencilla, pero tiene un problema: todo,
absolutamente todo es una cadena. Si usted intenta guardar lo equivalente a
un registro, es decir, datos diferentes de una misma entidad no tendrá
problema.

Si trata de guardar más de un registro, por ejemplo, varios libros, se puede

hacer de varias maneras (así como se hace con las cookies), pero de forma
elegante, se soluciona por medio de los formatos JSON o XML. En este caso,
almacenaremos la información en el formato JSON, que requiere de menos
etiquetas que XML.
La función recuperar ()
 2.2 Almacenar los datos en LocalStorage
en formato JSON
Se requieren dos funciones de JavaScript para manejar el formato JSON:

 Primero debemos crear un archivo HTML5 en blanco con las etiquetas

básicas. Guardaremos este archivo como libros.html. Ahí escribiremos una
forma para dar de alta o añadir un registro, en este caso un libro. Habrá
una segunda tabla vacía, llamada listado, donde desplegaremos los
registros que hayamos capturado.
 La primera acción que realizaremos será leer el objeto de LocalStorage
(que, como lo comentamos, es una enorme cadena) y la almacenaremos
en la variable libros. La siguiente acción será convertir esa cadena en un
objeto JSON por medio del método parse().
 Si el proceso nos regresa un valor null, quiere decir que no hay valores
almacenados y creamos un arreglo vacío “al vuelo”. Creamos también las
estructuras de las funciones lista() y alta() que aún no hemos codificado.
Ahora escribiremos el código de la función de alta().
 Una vez que ya tenemos todos los nodos en el arreglo libros, lo añadimos
al LocalStorage por medio del método setItem().
 Por medio de un ciclo de tipo for..in, recorremos todos los nodos del
arreglo que contiene los objetos JSON (libros). Tomamos uno a uno los
nodos de tipo JSON y los convertimos en objetos de tipo JavaScript por
medio del método JSON.parse().
 Armamos los elementos de la tabla en las líneas posteriores y por último
la vaciamos en la división listado por medio del método innerHTML().
 Si cierra el navegador y vuelve a ejecutar el archivo libros.html, notará que
no se despliega la información. Esto es porque necesitamos ejecutar la
función lista() al momento que los elementos HTML han sido creados. Esto
lo debemos hacer con un evento de tipo onload(), así que tenemos que
escribirlo dentro de las etiquetas <script></script>.
 Guarde su archivo y ejecútelo. Deberán desplegarse los dos libros que
capturó previamente.
 2.3 Borrar un registro almacenado en LocalStorage
Para ello debemos de modificar nuestra función de lista() para incluir dos
botones: uno para borrar y el otro para modificar el registro correspondiente.
Aquí el truco será lanzar una función, por medio del evento onclick(), con el
parámetro del número del elemento dentro del arreglo, el cual nos ayudará a
identificar el nodo que necesitamos borrar o modificar.
Escriba esta función dentro de las llaves <script></script> y fuera de las otras
funciones.
Observe que el algoritmo para borrar un registro es muy sencillo: en realidad
lo estamos eliminando del arreglo y lo sobrescribimos en el objeto
LocalStorage. Hacemos previamente una validación con la función de
JavaScript confirm() y enviamos un mensaje al usuario.
Utilizaremos una variable para determinar si vamos a editar (E) o a añadir (A).
La función lista {} modificada
La función borra () modificada
La función edita ()