HTML5 - Archiviazione web

HTML5 introduce due meccanismi, simili ai cookie di sessione HTTP, per memorizzare i dati strutturati sul lato client e per superare i seguenti inconvenienti.

I cookie sono inclusi in ogni richiesta HTTP, rallentando così la tua applicazione web trasmettendo gli stessi dati.
I cookie sono inclusi in ogni richiesta HTTP, inviando così dati non crittografati su Internet.
I cookie sono limitati a circa 4 KB di dati. Non abbastanza per memorizzare i dati richiesti.

I due magazzini sono session storage e local storage e sarebbero utilizzati per gestire situazioni diverse.

Le ultime versioni di quasi tutti i browser supportano l'archiviazione HTML5, incluso Internet Explorer.

Archiviazione della sessione

Il Session Storage è progettato per gli scenari in cui l'utente sta effettuando una singola transazione, ma potrebbe eseguire più transazioni in diverse finestre contemporaneamente.

Esempio

Ad esempio, se un utente acquista biglietti aerei in due finestre diverse, utilizzando lo stesso sito. Se il sito utilizzava i cookie per tenere traccia del biglietto che l'utente stava acquistando, quando l'utente faceva clic da una pagina all'altra in entrambe le finestre, il biglietto attualmente acquistato "trapelava" da una finestra all'altra, causando potenzialmente compra due biglietti per lo stesso volo senza accorgertene.

HTML5 introduce l' attributo sessionStorage che verrebbe utilizzato dai siti per aggiungere dati all'archiviazione della sessione e sarà accessibile a qualsiasi pagina dello stesso sito aperta in quella finestra, ovverosession e non appena si chiude la finestra, la sessione andrebbe persa.

Di seguito è riportato il codice che imposta una variabile di sessione e accede a quella variabile:

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( sessionStorage.hits ) {
            sessionStorage.hits = Number(sessionStorage.hits) +1;
         } else {
            sessionStorage.hits = 1;
         }
         document.write("Total Hits :" + sessionStorage.hits );
      </script>
	
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

Questo produrrà il seguente risultato:

Memoria locale

L' archiviazione locale è progettata per l'archiviazione che si estende su più finestre e dura oltre la sessione corrente. In particolare, le applicazioni Web potrebbero voler memorizzare megabyte di dati utente, come interi documenti creati dall'utente o la cassetta postale di un utente, sul lato client per motivi di prestazioni.

Anche in questo caso, i cookie non gestiscono bene questo caso, perché vengono trasmessi con ogni richiesta.

Esempio

HTML5 introduce l' attributo localStorage che verrebbe utilizzato per accedere all'area di archiviazione locale di una pagina senza limiti di tempo e questa archiviazione locale sarà disponibile ogni volta che si utilizzerà quella pagina.

Di seguito è riportato il codice che imposterebbe una variabile di archiviazione locale e accederà a quella variabile ogni volta che si accede a questa pagina, anche la volta successiva, quando si apre la finestra -

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
      </script>
		
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

Questo produrrà il seguente risultato:

Elimina archivio web

La memorizzazione dei dati sensibili sulla macchina locale potrebbe essere pericolosa e potrebbe lasciare una falla di sicurezza.

I dati di archiviazione della sessione verranno eliminati dai browser immediatamente dopo la conclusione della sessione.

Per cancellare un'impostazione di archiviazione locale è necessario chiamare localStorage.remove('key'); dove "chiave" è la chiave del valore che desideri rimuovere. Se vuoi cancellare tutte le impostazioni, devi chiamarelocalStorage.clear() metodo.

Di seguito è riportato il codice che cancellerebbe la memoria locale completa -

<!DOCTYPE HTML>

<html>
   <body>

      <script type = "text/javascript">
         localStorage.clear();

         // Reset number of hits.
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
			
      </script>
		
      <p>Refreshing the page would not to increase hit counter.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

Questo produrrà il seguente risultato: