Utilisation du stockage local HTML5 dans vos applications Web

Le stockage local HTML5 est utilisé pour stocker les paires clé/valeur côté client. Ces paires clé/valeur peuvent être extraites sur les pages HTML issues du même domaine. Les données du stockage local sont stockées sur le disque et sont conservées même en cas de redémarrage des applications. L'encapsuleur Intel AppUp™ prend en charge le stockage local HTML5. Pour davantage d'informations sur le stockage local, lisez la spécification à l'adresse http://dev.w3.org/html5/webstorage/.

Utilisation du stockage local HTML5 dans vos applications

Le stockage local HTML5 peut être utilisé dans des applications devant enregistrer les données et préférences utilisateur en cas de redémarrage des applications. Voici quelques exemples dans lesquels le stockage local HTML5 peut être utilisé pour augmenter la fonctionnalité d'une application Web.

Jeux : Le stockage local peut être utilisé pour enregistrer la progression d'un jeu ou pour stocker les meilleurs scores pouvant être extraits ultérieurement.

Multimédia : Si une application Web intègre un flux audio ou vidéo, l'application peut stocker l'horodatage des flux audio/vidéo dans le stockage local. Puisque ces données sont conservées en cas de redémarrage des applications, vous pouvez lancer le flux audio/vidéo à partir du dernier emplacement mis en pause.

Les API JavaScript* suivantes peuvent être utilisées pour stocker, extraire, supprimer ou effacer des données :

Stocker une valeur : 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"; 
		}

Extraire une valeur : window.localStorage.getItem (keyinput);

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

Supprimer une valeur : window.localStorage.removeItem(keyinput);

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

Effacer toutes les valeurs : window.localStorage.clear()

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

Exemple de code : 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>
Pour de plus amples informations sur les optimisations de compilation, consultez notre Avertissement concernant les optimisations.