Uso del almacenamiento local HTML5 en las aplicaciones web

El almacenamiento local HTML5 se utiliza para almacenar pares de clave-valor en el lado del cliente. Estos pares de clave-valor se pueden recuperar en páginas HTML que provengan del mismo dominio. Los datos de almacenamiento local se almacenan en el disco y se conservan después de reiniciar las aplicaciones. El encapsulador Intel AppUp™ es compatible con el almacenamiento local HTML5. Para obtener información adicional sobre el almacenamiento local, lea la especificación en http://dev.w3.org/html5/webstorage/.

Uso del almacenamiento local HTML5 en las aplicaciones

El almacenamiento local HTML5 se puede utilizar en aplicaciones que deben guardar datos y preferencias de los usuarios de manera que se conserven después de haber reiniciado las aplicaciones. A continuación se ofrecen algunos ejemplos del uso del almacenamiento local HTML5 a fin de aumentar la funcionalidad de una aplicación web.

Juegos: El almacenamiento local se puede utilizar para guardar el progreso de un juego o las puntuaciones más altas, que más adelante se podrán recuperar.

Multimedia: Si una aplicación web integra una secuencia de audio o vídeo, la aplicación puede almacenar la marca de hora de estas secuencias en el almacenamiento local. Dado que estos datos se conservan entre distintos reinicios de la aplicación, puede iniciar la secuencia de audio o vídeo desde la última ubicación pausada.

Las API JavaScript* siguientes se pueden utilizar para almacenar, recuperar, eliminar o borrar los datos:

Almacenar un valor: 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"; 
		}

Recuperar un valor: window.localStorage.getItem (keyinput);

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

Eliminar un valor: window.localStorage.removeItem(keyinput);

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

Borrar todos los valores: window.localStorage.clear()

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

Código de ejemplo: 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>
Para obtener información más completa sobre las optimizaciones del compilador, consulte nuestro Aviso de optimización.