L'API di archiviazione Web fornisce meccanismi tramite i quali i browser possono archiviare in modo sicuro coppie chiave / valore, in modo molto più intuitivo rispetto all'utilizzo dei cookie. L' API di archiviazione Web estende l' Windowoggetto con due nuove proprietà - Window.sessionStoragee Window.localStorage. - invocando uno di questi verrà creata un'istanza dell'oggetto Storage, attraverso la quale è possibile impostare, recuperare e rimuovere gli elementi di dati. Un oggetto di archiviazione diverso viene utilizzato per sessionStoragee localStorageper ogni origine (dominio).
Gli oggetti di archiviazione sono semplici archivi di valori-chiave , simili agli oggetti, ma rimangono intatti durante il caricamento della pagina .
localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');
Le chiavi e i valori sono sempre stringhe . Per memorizzare qualsiasi tipoconvert it to Stringe quindi memorizzarlo. Si consiglia sempre di utilizzareStorage interfacemetodi.
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('Converting String to Object: ', JSON.parse(retrievedObject));
I due meccanismi all'interno di Web Storage sono i seguenti:
- sessionStorage mantiene un'area di archiviazione separata per ogni origine. Politica della stessa origine che è disponibile per la durata della sessione della pagina (a condizione che il browser sia aperto, inclusi ricariche e ripristini di pagine).
- localStorage fa la stessa cosa, ma persiste anche quando il browser viene chiuso e riaperto.
Archiviazione « L'archiviazione locale scrive i dati sul disco, mentre l'archiviazione della sessione scrive i dati solo nella memoria. Tutti i dati scritti nella memoria della sessione vengono eliminati quando l'app viene chiusa.
Lo spazio di archiviazione massimo disponibile è diverso per browser , ma la maggior parte dei browser ha implementato almeno il limite di archiviazione massimo consigliato di w3c di 5 MB .
+----------------+--------+---------+-----------+--------+
| | Chrome | Firefox | Safari | IE |
+----------------+--------+---------+-----------+--------+
| LocalStorage | 10MB | 10MB | 5MB | 10MB |
+----------------+--------+---------+-----------+--------+
| SessionStorage | 10MB | 10MB | Unlimited | 10MB |
+----------------+--------+---------+-----------+--------+
Rileva sempre la sicurezza di LocalStorage e gli errori di quota superati
StorageEvent «L'evento di archiviazione viene generato sull'oggetto Window di un documento quando viene modificata un'area di archiviazione. Quando un agente utente deve inviare una notifica di archiviazione per un documento, l'agente utente deve mettere in coda un'attività per generare un evento denominato archiviazione nell'oggetto Window dell'oggetto Document, utilizzando StorageEvent.
Nota: per un esempio reale, vedere Demo di archiviazione Web . controlla il codice sorgente
Ascolta l'evento di archiviazione su dom / Window per rilevare le modifiche nella memoria. violino .
Cookie (cookie web, cookie del browser) I cookie sono dati, memorizzati in piccoli file di testo come coppie nome-valore, sul tuo computer.
Accesso JavaScript tramite Document.cookie
È inoltre possibile creare nuovi cookie tramite JavaScript utilizzando la proprietà Document.cookie e, se il flag HttpOnly non è impostato, è possibile accedere ai cookie esistenti anche da JavaScript.
document.cookie = "yummy_cookie=choco";
document.cookie = "tasty_cookie=strawberry";
console.log(document.cookie);
// logs "yummy_cookie=choco; tasty_cookie=strawberry"
Meccanismo di gestione dello stato HTTP dei cookie sicuri e di HttpOnly
I cookie vengono spesso utilizzati nell'applicazione Web per identificare un utente e la sua sessione autenticata
Quando riceve una richiesta HTTP, un server può inviare un'intestazione Set-Cookie con la risposta. Il cookie viene generalmente memorizzato dal browser, quindi viene inviato con le richieste fatte allo stesso server all'interno di un'intestazione HTTP del cookie.
Set-Cookie: <cookie-name>=<cookie-value>
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
I cookie di sessione verranno rimossi all'arresto del client. Non specificano le direttive Scadenza o Max-Age.
Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/
I cookie permanenti scadono a una data specifica (Scade) o dopo un determinato periodo di tempo (Max-Age).
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
L'intestazione della richiesta HTTP Cookie contiene i cookie HTTP memorizzati precedentemente inviati dal server con l'intestazione Set-Cookie. I cookie solo HTTP non sono accessibili tramite JavaScript tramite la proprietà Document.cookie, le API XMLHttpRequest e Request per mitigare gli attacchi contro gli script tra siti (XSS).
I cookie vengono utilizzati principalmente per tre scopi:
- Gestione della sessione «Login, carrelli della spesa, punteggi di gioco o qualsiasi altra cosa che il server dovrebbe ricordare
- Personalizzazione «Preferenze dell'utente, temi e altre impostazioni
- Tracciamento (registrazione e analisi del comportamento dell'utente) «Ai cookie è associato un dominio. Se questo dominio è uguale al dominio della pagina in cui ti trovi, si dice che i cookie sono cookie proprietari. Se il dominio è diverso, si dice che sia un cookie di terze parti. Mentre i cookie proprietari vengono inviati solo al server che li imposta, una pagina Web può contenere immagini o altri componenti memorizzati su server in altri domini (come banner pubblicitari). I cookie inviati tramite questi componenti di terze parti sono chiamati cookie di terze parti e vengono utilizzati principalmente per la pubblicità e il tracciamento sul Web.
I cookie sono stati inventati per risolvere il problema "come ricordare le informazioni sull'utente":
- Quando un utente visita una pagina Web, il suo nome può essere memorizzato in un cookie.
- La prossima volta che l'utente visita la pagina, i cookie appartenenti alla pagina vengono aggiunti alla richiesta. In questo modo il server ottiene i dati necessari per "ricordare" le informazioni sugli utenti.
Esempio GitHubGist
Come sintesi,
- localStorage persiste su diverse schede o finestre, e anche se chiudiamo il browser, di conseguenza con la politica di sicurezza del dominio e le scelte dell'utente sul limite di quota.
- L'oggetto sessionStorage non persiste se chiudiamo la scheda (contesto di navigazione di livello superiore) in quanto non esiste se navighiamo attraverso un'altra scheda o finestra.
- L'archiviazione Web (sessione, locale) ci consente di salvare una grande quantità di coppie chiave / valore e un sacco di testo, cosa impossibile da fare tramite i cookie.
- I cookie utilizzati per azioni sensibili dovrebbero avere solo una durata breve.
- Cookie utilizzati principalmente per la pubblicità e il tracciamento sul Web. Vedi ad esempio i tipi di cookie utilizzati da Google .
- I cookie vengono inviati con ogni richiesta, quindi possono peggiorare le prestazioni (soprattutto per le connessioni dati mobili). Le API moderne per l'archiviazione client sono l'API di archiviazione Web (localStorage e sessionStorage) e IndexedDB.
