Como utilizar el LocalStorage de JavaScript

LocalStorage y sessionStorage son propiedades de HTML5 (web storage), que permiten almacenar datos en nuestro navegador

Local Storage

Guarda información que permanecerá almacenada por tiempo indefinido; sin importar que el navegador se cierre.

Session Storage

Almacena los datos de una sesión y éstos se eliminan cuando el navegador se cierra.

Veamos como usar el LocalStorage en JavaScript.

Comprobar si el navegador es compatible

Podemos ver si el navegador web tiene disponible la funcionalidad del localstorage así:

if (typeof(Storage) !== "undefined") {
// LocalStorage disponible
} else {
// LocalStorage no soportado en este navegador
}

Guardar datos en el navegador

Para almacenar datos y guardar nuevos elementos o indices en el LocalStorage usaremos la siguiente instrucción:

// Guardar
localStorage.setItem("titulo", "Almacenar texto u objetos de JS");

De esta manera damos de alta un nuevo elemento en el almacenamiento del browser.

Recuperar datos

Para conseguir los datos que tenemos guardados en un indice de nuestro almacenamiento local del navegador usaremos:

// Conseguir elemento
localStorage.getItem("titulo");

Esto nos devolverá el valor que hemos guardado anteriormente.

Guardar objetos en el LocalStorage

Para guardar un objeto primero debemos convertirlo en un string json ya que el localstorage no permite guardar objetos de JavaSciprt como tal.

Tendríamos que hacer algo así:

localStorage.setItem("usuario", JSON.stringify(mi_objeto));

Guardamos el elemento usuario cuyo valor es un objeto convertido a string.

Sacar objetos del LocalStorage

Para recuperar un objeto primero debemos convertirlo en un objeto de JavaScript json en lugar del string json que hay guardado por defecto.

Haríamos esto:

JSON.parse(localStorage.getItem("usuario"));

Recordemos que:
JSON.parse() es para parsear o convertir algo a un objeto JSON usable por JavaScript.
JSON.stringify() es para crear un JSON string de un objeto o un array.

Borrar o vaciar el localStorage

Para eliminar un elemento del localStorage haremos:

localStorage.removeItem("titulo");

Para eliminar todas las variables guardadas en el localStorage haremos:

localStorage.clear();