Local Storage Example

Contact Us or call 1-877-932-8228
Local Storage Example

Local Storage Example

Let's look at a simple page on the Jazz Calendar site - open the file HTML5MobileSpecific/Demos/storage.html in your browser:

local storage example

  1. Enter "Jane" for the Name 1 field and "Abby" for the Name 2 field.
  2. Click the Save button.
  3. Close and reopen the browser.
  4. Click the Update from Saved button to see the stored values replaced.

Code Sample:

HTML5MobileSpecific/Demos/storage.html
<!DOCTYPE html>
<html>
<head>
  <title>Jazz Calendar - Local Live Jazz Music Events</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
  <link rel="stylesheet" type="text/css" href="css/storage.css" />
  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  <script type="text/javascript">
  	function html5_storage_support() {
  		//check to see if this browser support local storage: return true if so, false if not
		try {
			return 'localStorage' in window && window['localStorage'] !== null;
		} catch (e) {
			return false;
		}
	}
  	function save() {
  		if (html5_storage_support()) {
  			//get the user-entered values from the two text fields:
  			var name1 = document.getElementById("name1").value;
  			var name2 = document.getElementById("name2").value;

  			//create two local-storage keys (name1, name2) and assign
  			//each the respective value from the text fields:
  			localStorage.setItem('name1',name1);
  			localStorage.setItem('name2',name2);
  		}
  	}

  	function set() {
  		if (html5_storage_support()) {
  			//set the value of each text field from the stored values:
  			document.getElementById('name1').value = localStorage.getItem('name1');
  			document.getElementById('name2').value = localStorage.getItem('name2');
  		}
  	}
  </script>
</head>

<body>
  <div id="container">
	<div id="main">
	  <header>
		<img src="images/logo.gif" alt="Jazz Calendar" />
		<h3 id="tagline">Local jazz info</h3>
	  </header>
	  <nav>
		<ul>
		  <li><a href="index.html">Home</a></li>
		  <li><a href="performances.html">Performances</a></li>
		  <li><a href="about.html">About</a></li>
		  <li><a href="contact.html">Contact</a></li>
		</ul>
	  </nav>
	  <div id="maincontent">
		  <article>
			<h2>Storage Example</h2>
			<label for="name1">Name 1</label><br>
			<input type="text" name="name1" id="name1"><br>
			<br>
			<label for="name2">Name 2</label><br>
			<input type="text" name="name2" id="name2"><br>
			<br>
			<button onclick="save()">Save</button>
			<button onclick="set()">Update from Saved</button>
		  </article>
	  </div>
	  <aside id="sidebar">
		  <h3>Signup</h3>
		  <p>Become a member of Jazz Calendar now! <a href="#">Email us</a> to receive frequent notices on upcoming live shows.</p>
	  </aside>
	  <footer id="contactinfo">
		<p>Jazz Calendar
		<br />123 Fake Street, Sometown, USA | 555-123-4567</p>
	  </footer>
	</div>
  </div>
</body>
</html>

When the Save button is clicked, the save() function is called: the current values from the name1 and name2 fields are saved (localStorage.setItem) to keys name1 and name2, respectively.

Function set() - called when the Update from Saved button is clicked - sets the values of the two fields from the last saved values.

Note that each function checks first, via function html5_storage_support(), to see if the current browser supports web storage.

Next