Uso dello storage locale HTML5 nelle applicazioni Web

Lo storage locale HTML5 viene utilizzato per archiviare coppie di valori chiave sul lato client. Queste coppie di valori chiave possono essere recuperate in pagine HTML originate dallo stesso dominio. I dati dello storage locale vengono archiviati sul disco e persistono nel corso dei riavvii dell'applicazione. L'incapsulatore Intel AppUp™ supporta lo storage locale HTML5. Per ulteriori informazioni sullo storage locale, leggere le specifiche sul sito http://dev.w3.org/html5/webstorage/.

Uso dello storage locale HTML5 nelle applicazioni

Lo storage locale HTML5 può essere utilizzato in applicazioni che necessitano di salvare dati utente e preferenze nel corso dei riavvii dell'applicazione. Di seguito sono riportati alcuni esempi in cui è possibile utilizzare lo storage locale HTML5 per aumentare la funzionalità di un'applicazione Web.

Giochi: lo storage locale può essere utilizzato per salvare l'avanzamento di un gioco o i punteggi massimi di store che è possibile recuperare in un secondo momento.

Supporti multimediali: se in un'applicazione Web è incorporato un flusso audio o video, l'applicazione è in grado di archiviare l'indicazione di data e ora del flusso audio/video nello storage locale. Poiché i dati vengono archiviati nel corso dei riavvii dell'applicazione, è possibile avviare il flusso audio/video dall'ultima posizione sospesa.

È possibile utilizzare le seguenti API JavaScript* per archiviare, recuperare, rimuovere o cancellare i dati:

Archiviazione di un valore: window.localStorage.setItem(keyinput,valinput)

		var keyinput = “key10”;
		var valoutput = “value10”;
		if(typeof(window.localStorage) != 'undefined'){ 
			window.localStorage.setItem(keyinput,valinput); 
		} 
		else{ 
			throw "window.localStorage, not defined"; 
		}

Recupero di un valore: window.localStorage.getItem (keyinput);

		var valoutput ;
		if(typeof(window.localStorage) != 'undefined'){ 
			valoutput = window.localStorage.getItem (“key10”); 
		} 
		else{ 
			throw "window.localStorage, not defined"; 
		}

Rimozione di un valore: window.localStorage.removeItem(keyinput);

		var valoutput ;
		if(typeof(window.localStorage) != 'undefined'){ 
			valoutput = window.localStorage. removeItem (“key10”); 
		} 
		else{ 
			throw "window.localStorage, not defined"; 
		}

Cancellazione di tutti i valori: window.localStorage.clear()

		if(typeof(window.localStorage) != 'undefined'){ 
			window.localStorage. clear() ;
		} 
		else{ 
			throw "window.localStorage, not defined"; 
		}

Esempio di codice: localStorageSample.html

	<!DOCTYPE HTML>

	<html>
		<head>
			<TITLE>HTML5 local storage tester (testbed)</TITLE>
		</head>
		<body>
			<div id="output_area" 
			style="position:relative;width:100%;height:200px;overflow:auto;
			border: dotted 1px #ff0000;">
			</div>

			<div>
				<input id="local_storage_key" type="text" />
				<input id="local_storage_value" type="text" />
			</div>

			<div>
				<input type="button" value="load" onclick="load_local();"/>
				<input type="button" value="store" onclick="store_local();"/>
			</div>
			<script id="this_page_js" type="text/javascript">

			/* store some string data to local storage
				This is using some text input elements on the page
				for input.*/

			function store_local(domid_prefix){
				var keyinput = document.getElementById('local_storage_key').value;
				var valinput = document.getElementById('local_storage_value').value;
				try{
					if(typeof(window.localStorage) != 'undefined'){
					window.localStorage.setItem(keyinput,valinput);
					}
					else{
						throw "window.localStorage, not defined";
					}
				}
				catch(err){
					output_str("store_local,error," + err);
				}
			}

			/* load some string data from local storage
				This is using some text input elements on the page
				for the key name input and value output.*/

			function load_local(domid_prefix){
				var keyinput = document.getElementById('local_storage_key').value;
			  var valoutput = document.getElementById('local_storage_value');
			  try {
				if(typeof(window.localStorage) != 'undefined') {
				  valoutput.value = window.localStorage.getItem(keyinput);
				}
				else {
				  throw "window.localStorage, not defined";
				}
			  }
			  catch(err) {
				output_str("store_local,error," + err);
			  }
			}

			/* function to print to the debug area */

			function output_str(str){
				var da = document.getElementById("output_area");
				da.innerHTML += str + "<br/>";
				da.scrollTop = da.scrollHeight;
			}
			</script>
		 </body>
	</html>
Per informazioni più dettagliate sulle ottimizzazioni basate su compilatore, vedere il nostro Avviso sull'ottimizzazione.