Using HTML5 Local Storage in Your Web Apps

HTML5 local storage is used for storing key value pairs on the client side. These key value pairs can be retrieved in HTML pages originating from the same domain. The Local storage data is stored on the disk and persists across application restarts. For additional information on local storage, please read the specification at http://dev.w3.org/html5/webstorage/.

Using HTML5 Local Storage in your Apps

HTML5 local storage can be used in apps that need to save user data and preferences across app restarts. Below are a few examples where HTML5 local storage can be used to increase functionality of a web application.

Games: Local storage can be used to save progress of a game or a store high scores that can be later retrieved.

Media: If a web app embeds an audio or video stream, the app can store the timestamp of the audio/video streams in local storage. Since this data is stored across application restarts, you can start the audio/video stream from the last paused location.

The following JavaScript* APIs can be used to store, retrieve, remove, or clear data:

Store a Value: 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"; 
		}

Retrieve a Value: window.localStorage.getItem (keyinput);

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

Remove a Value: window.localStorage.removeItem(keyinput);

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

Clear all the values: window.localStorage.clear()

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

Sample 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>
For more complete information about compiler optimizations, see our Optimization Notice.
Categories:
Tags: