JavaScript
Archiviazione Web

Sintassi

• localStorage.setItem (nome, valore);

• localStorage.getItem (nome);

• localStorage.name = value;

• localStorage.name;

• localStorage.clear ()

• localStorage.removeItem (nome);

Parametri

Osservazioni

Utilizzo di localStorage

L'oggetto localStorage fornisce persistenti (ma non permanenti - vedi limiti sotto) l'archiviazione dei valori-chiave delle stringhe. Eventuali modifiche sono immediatamente visibili in tutte le altre finestre / frame dalla stessa origine. I valori memorizzati persistono indefinitamente a meno che l'utente non cancelli i dati salvati o configuri un limite di scadenza. localStorage utilizza un'interfaccia simile alla mappa per ottenere e impostare valori.

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

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

Se si desidera archiviare semplici dati strutturati, è possibile utilizzare JSON per serializzarlo su e da stringhe per la memorizzazione.

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 } ]

limiti di localStorage nei browser

Browser per dispositivi mobili:

Browser desktop:

Eventi di archiviazione

Ogni volta che un valore in set in localStorage, un evento di storage verrà inviato su tutte le altre windows dalla stessa origine. Questo può essere usato per sincronizzare lo stato tra pagine diverse senza ricaricare o comunicare con un server. Ad esempio, possiamo riflettere il valore di un elemento di input come testo di paragrafo in un'altra finestra:

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;
  }
});

Gli appunti

L'evento non viene attivato o catchable in Chrome, Edge e Safari se il dominio è stato modificato tramite 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

L'oggetto sessionStorage implementa la stessa interfaccia di archiviazione di localStorage. Tuttavia, anziché essere condivisi con tutte le pagine della stessa origine, i dati sessionStorage vengono memorizzati separatamente per ogni finestra / scheda. I dati memorizzati persistono tra le pagine in quella finestra / scheda finché sono aperti, ma non sono visibili da nessun'altra 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);
};

Salva i dati in sessionStorage

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

Ottieni i dati salvati da sessionStorage

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

Rimuovi i dati salvati da sessionStorage

sessionStorage.removeItem('key')

Svuotamento dello spazio di archiviazione

Per cancellare lo spazio di archiviazione, è sufficiente eseguire

localStorage.clear();

Condizioni di errore

La maggior parte dei browser, se configurati per bloccare i cookie, bloccherà anche localStorage . I tentativi di usarlo comporteranno un'eccezione. Non dimenticare di gestire questi casi .

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()

Se l'errore non è stato gestito, il programma smetterebbe di funzionare correttamente.

Rimuovi l'articolo di archiviazione

Per rimuovere un elemento specifico dal browser di archiviazione (l'opposto di setItem ) utilizzare removeItem

localStorage.removeItem("greet");

Esempio:

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

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

(Lo stesso vale per sessionStorage )

Modo più semplice di gestire lo storage

localStorage , sessionStorage sono oggetti JavaScript e puoi trattarli come tali.
Invece di usare metodi di archiviazione come .getItem() , .setItem() , ecc ... ecco un'alternativa più semplice:

// 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();

Esempio:

// 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();

localStorage length

localStorage.length proprietà localStorage.length restituisce un numero intero che indica il numero di elementi nel localStorage

Esempio:

Imposta elementi

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

Ottieni la lunghezza

localStorage.length; // 3