medesko/gist:6192982

## gistfile1.html
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>HTML5 Local Storage Example</title>

    <!-- include Bootstrap CSS for layout -->
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>

  <body>
    <div class="container">
      <h1>HTML5 Local Storage Example</h1>

      <form method="post" class="form-horizontal">
        <fieldset>
          <legend>Enquiry Form</legend>

          <div class="control-group">
            <label class="control-label" for="type">Type of enquiry</label>
            <div class="controls">
              <select name="type" id="type">
                <option value="">Please select</option>
                <option value="general">General</option>
                <option value="sales">Sales</option>
                <option value="support">Support</option>
              </select>
            </div>
          </div>

          <div class="control-group">
            <label class="control-label" for="name">Name</label>
            <div class="controls">
              <input class="input-xlarge" type="text" name="name" id="name" value="" maxlength="50">
            </div>
          </div>

          <div class="control-group">
            <label class="control-label" for="email">Email Address</label>
            <div class="controls">
              <input class="input-xlarge" type="text" name="email" id="email" value="" maxlength="150">
            </div>
          </div>

          <div class="control-group">
            <label class="control-label" for="message">Message</label>
            <div class="controls">
              <textarea class="input-xlarge" name="message" id="message"></textarea>
            </div>
          </div>

          <div class="control-group">
            <div class="controls">
              <label class="checkbox">
                <input name="subscribe" id="subscribe" type="checkbox">
                Subscribe to our newsletter
              </label>
            </div>
          </div>
        </fieldset>

        <div class="form-actions">
          <input type="submit" name="submit" id="submit" value="Send" class="btn btn-primary">
        </div>
      </form>
    </div>

    <!-- include jQuery library -->
    <script src="//code.jquery.com/jquery-latest.js"></script>
    <script>
    $(document).ready(function () {
      /*
       * check browser supports local storage
       */
      if (localStorage) {
        /*
         * if form field values exist in local storage use
         * them to populate the form when the page loads
         */
        if (localStorage.type) {
          $("#type").find("option[value=" + localStorage.type + "]").attr("selected", true);
        }
        if (localStorage.name) {
          $("#name").val(localStorage.name);
        }
        if (localStorage.email) {
          $("#email").val(localStorage.email);
        }
        if (localStorage.message) {
          $("#message").val(localStorage.message);
        }
        if (localStorage.subscribe === "checked") {
          $("#subscribe").attr("checked", "checked");
        }

        /*
         * when a form field changes store it's value in local storage
         */
        $("input[type=text],select,textarea").change(function(){
          $this = $(this);
          localStorage[$this.attr("name")] = $this.val();
        });
        $("input[type=checkbox]").change(function(){
          $this = $(this);
          localStorage[$this.attr("name")] = $this.attr("checked");
        });

        $("form")
          /*
           * clear local storage when the form is submitted
           */
          .submit(function(){
            localStorage.clear();
          })
          /*
           * output local storage to the console each time the form changes
           * (you may want to remove this code on the production server)
           */
          .change(function(){
            console.log(localStorage);
          });
      }
    });
    </script>
  </body>
</html>
	<!DOCTYPE html>

	<html lang="en">
	<head>
	<meta charset="utf-8">

	<title>HTML5 Local Storage Example</title>

	<!-- include Bootstrap CSS for layout -->
	<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
	</head>

	<body>
	<div class="container">
	<h1>HTML5 Local Storage Example</h1>

	<form method="post" class="form-horizontal">
	<fieldset>
	<legend>Enquiry Form</legend>

	<div class="control-group">
	<label class="control-label" for="type">Type of enquiry</label>
	<div class="controls">
	<select name="type" id="type">
	<option value="">Please select</option>
	<option value="general">General</option>
	<option value="sales">Sales</option>
	<option value="support">Support</option>
	</select>
	</div>
	</div>

	<div class="control-group">
	<label class="control-label" for="name">Name</label>
	<div class="controls">
	<input class="input-xlarge" type="text" name="name" id="name" value="" maxlength="50">
	</div>
	</div>

	<div class="control-group">
	<label class="control-label" for="email">Email Address</label>
	<div class="controls">
	<input class="input-xlarge" type="text" name="email" id="email" value="" maxlength="150">
	</div>
	</div>

	<div class="control-group">
	<label class="control-label" for="message">Message</label>
	<div class="controls">
	<textarea class="input-xlarge" name="message" id="message"></textarea>
	</div>
	</div>

	<div class="control-group">
	<div class="controls">
	<label class="checkbox">
	<input name="subscribe" id="subscribe" type="checkbox">
	Subscribe to our newsletter
	</label>
	</div>
	</div>
	</fieldset>

	<div class="form-actions">
	<input type="submit" name="submit" id="submit" value="Send" class="btn btn-primary">
	</div>
	</form>
	</div>

	<!-- include jQuery library -->
	<script src="//code.jquery.com/jquery-latest.js"></script>
	<script>
	$(document).ready(function () {
	/*
	* check browser supports local storage
	*/
	if (localStorage) {
	/*
	* if form field values exist in local storage use
	* them to populate the form when the page loads
	*/
	if (localStorage.type) {
	$("#type").find("option[value=" + localStorage.type + "]").attr("selected", true);
	}
	if (localStorage.name) {
	$("#name").val(localStorage.name);
	}
	if (localStorage.email) {
	$("#email").val(localStorage.email);
	}
	if (localStorage.message) {
	$("#message").val(localStorage.message);
	}
	if (localStorage.subscribe === "checked") {
	$("#subscribe").attr("checked", "checked");
	}

	/*
	* when a form field changes store it's value in local storage
	*/
	$("input[type=text],select,textarea").change(function(){
	$this = $(this);
	localStorage[$this.attr("name")] = $this.val();
	});
	$("input[type=checkbox]").change(function(){
	$this = $(this);
	localStorage[$this.attr("name")] = $this.attr("checked");
	});

	$("form")
	/*
	* clear local storage when the form is submitted
	*/
	.submit(function(){
	localStorage.clear();
	})
	/*
	* output local storage to the console each time the form changes
	* (you may want to remove this code on the production server)
	*/
	.change(function(){
	console.log(localStorage);
	});
	}
	});
	</script>
	</body>
	</html>