- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>HTML5 Local Storage Example</title>
- <!-- include Bootstrap CSS for layout -->
- <link 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 src1="//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>
- //该片段来自于http://www.codesnippet.cn/detail/300820135503.html
来源: http://www.codesnippet.cn/detail/300820135503.html