`

使用jquery 读取html 5 localstorage的值

html5 
阅读更多
在HTML 5中，localstorage是个不错的东西，在支持localstorage的浏览器中，
能持久化用户表单的输入，即使关掉浏览器，下次重新打开浏览器访问，也能读出其值，
下面给出的例子是使用jquery 在每次表单加载的时候，读localstorage的值，而在
表单每次提交时则清楚其值的例子

首先是一个表单： 
<!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>


然后是js部分代码： 
<script src="//code.jquery.com/jquery-latest.js"></script>
    <script>
    $(document).ready(function () {
      /*
       * 判断是否支持localstorage
       */
      if (localStorage) {
        /*
         * 读出localstorage中的值
         */
        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");
        }
        
        /*
         * 当表单中的值改变时,localstorage的值也改变
         */
        $("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方法
           */
          .submit(function(){
            localStorage.clear();
          })
                 .change(function(){
            console.log(localStorage);
          });
      }
    });
4
顶
1
踩
分享到：
| mysql命令行下的--tee选项功能
评论
2 楼 jackyrong 2012-11-04  
呵呵，谢谢
1 楼 jinnianshilongnian 2012-11-04  
标题jquery 漏掉y了
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics