JavaScript
Almacenamiento web

Sintaxis

• localStorage.setItem (nombre, valor);

• localStorage.getItem (nombre);

• localStorage.name = valor;

• localStorage.name;

• localStorage.clear ()

• localStorage.removeItem (nombre);

Parámetros

Observaciones

Usando localStorage

El objeto localStorage proporciona un almacenamiento de valor-clave persistente (pero no permanente, consulte los límites a continuación) de las cadenas. Cualquier cambio es inmediatamente visible en todas las demás ventanas / marcos desde el mismo origen. Los valores almacenados persisten indefinidamente a menos que el usuario borre los datos guardados o configure un límite de caducidad. localStorage usa una interfaz similar a un mapa para obtener y configurar valores.

localStorage.setItem('name', "John Smith");
console.log(localStorage.getItem('name')); // "John Smith"

localStorage.removeItem('name');
console.log(localStorage.getItem('name')); // null

Si desea almacenar datos estructurados simples, puede usar JSON para serializarlos desde y hacia las cadenas para su almacenamiento.

var players = [{name: "Tyler", score: 22}, {name: "Ryan", score: 41}];
localStorage.setItem('players', JSON.stringify(players));

console.log(JSON.parse(localStorage.getItem('players')));
// [ Object { name: "Tyler", score: 22 }, Object { name: "Ryan", score: 41 } ]

Límites de almacenamiento local en los navegadores

Los navegadores móviles:

Navegadores de escritorio:

Eventos de almacenamiento

Siempre que se establezca un valor en localStorage, se enviará un evento de storage en todas las demás windows desde el mismo origen. Esto se puede usar para sincronizar el estado entre diferentes páginas sin recargar o comunicarse con un servidor. Por ejemplo, podemos reflejar el valor de un elemento de entrada como texto de párrafo en otra ventana:

var input = document.createElement('input');
document.body.appendChild(input);

input.value = localStorage.getItem('user-value');

input.oninput = function(event) {
  localStorage.setItem('user-value', input.value);
};

var output = document.createElement('p');
document.body.appendChild(output);

output.textContent = localStorage.getItem('user-value');

window.addEventListener('storage', function(event) {
  if (event.key === 'user-value') {
    output.textContent = event.newValue;
  }
});

Notas

El evento no se activa ni se puede capturar en Chrome, Edge y Safari si el dominio se modificó mediante un script.

// page url: http://sub.a.com/1.html
document.domain = 'a.com';

var input = document.createElement('input');
document.body.appendChild(input);

input.value = localStorage.getItem('user-value');

input.oninput = function(event) {
  localStorage.setItem('user-value', input.value);
};

// page url: http://sub.a.com/2.html
document.domain = 'a.com';

var output = document.createElement('p');
document.body.appendChild(output);

// Listener will never called under Chrome(53), Edge and Safari(10.0).
window.addEventListener('storage', function(event) {
  if (event.key === 'user-value') {
    output.textContent = event.newValue;
  }
});

sessionStorage

El objeto sessionStorage implementa la misma interfaz de almacenamiento que localStorage. Sin embargo, en lugar de compartirse con todas las páginas del mismo origen, los datos de SessionStorage se almacenan por separado para cada ventana / pestaña. Los datos almacenados persisten entre las páginas en esa ventana / pestaña durante el tiempo que están abiertas, pero no están visibles en ninguna otra parte.

var audio = document.querySelector('audio');

// Maintain the volume if the user clicks a link then navigates back here.
audio.volume = Number(sessionStorage.getItem('volume') || 1.0);
audio.onvolumechange = function(event) {
  sessionStorage.setItem('volume', audio.volume);
};

Guardar datos en sessionStorage

sessionStorage.setItem('key', 'value');

Obtener datos guardados de sessionStorage

var data = sessionStorage.getItem('key');

Eliminar datos guardados de sessionStorage

sessionStorage.removeItem('key')

Almacenamiento de limpieza

Para borrar el almacenamiento, simplemente ejecute

localStorage.clear();

Condiciones de error

La mayoría de los navegadores, cuando están configurados para bloquear las cookies, también bloquearán el localStorage . Intentar usarlo resultará en una excepción. No te olvides de gestionar estos casos .

var video = document.querySelector('video')
try {
    video.volume = localStorage.getItem('volume')
} catch (error) {
    alert('If you\'d like your volume saved, turn on cookies')
}
video.play()

Si no se manejara el error, el programa dejaría de funcionar correctamente.

Quitar elemento de almacenamiento

Para eliminar un elemento específico del almacenamiento del navegador (lo opuesto a setItem ) use removeItem

localStorage.removeItem("greet");

Ejemplo:

localStorage.setItem("greet", "hi");
localStorage.removeItem("greet");

console.log( localStorage.getItem("greet") ); // null

(Lo mismo se aplica para sessionStorage )

Manera más sencilla de manejar el almacenamiento.

localStorage , sessionStorage son objetos de JavaScript y puede tratarlos como tales.
En lugar de usar métodos de almacenamiento como .getItem() , .setItem() , etc ... aquí hay una alternativa más simple:

// Set
localStorage.greet = "Hi!"; // Same as: window.localStorage.setItem("greet", "Hi!");

// Get
localStorage.greet;         // Same as: window.localStorage.getItem("greet");

// Remove item
delete localStorage.greet;  // Same as: window.localStorage.removeItem("greet");

// Clear storage
localStorage.clear();

Ejemplo:

// Store values (Strings, Numbers)
localStorage.hello = "Hello";
localStorage.year  = 2017;    

// Store complex data (Objects, Arrays)
var user = {name:"John", surname:"Doe", books:["A","B"]};
localStorage.user = JSON.stringify( user );

// Important: Numbers are stored as String
console.log( typeof localStorage.year ); // String

// Retrieve values
var someYear = localStorage.year; // "2017"

// Retrieve complex data
var userData = JSON.parse( localStorage.user );
var userName = userData.name; // "John"

// Remove specific data
delete localStorage.year; 

// Clear (delete) all stored data
localStorage.clear();

longitud de almacenamiento local

localStorage.length propiedad localStorage.length devuelve un número entero que indica el número de elementos en el localStorage

Ejemplo:

Establecer elementos

localStorage.setItem('StackOverflow', 'Documentation');
localStorage.setItem('font', 'Helvetica');
localStorage.setItem('image', 'sprite.svg');

Obtener longitud

localStorage.length; // 3