使用jquery 读取html 5 localstorage的值

jackyrong

浏览: 7939102 次
性别:
来自: 广州

最近访客更多访客>>

尘与飞

深情痞子

Crow00

zihai367

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax/web相关

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
踩

分享到：

5个不可错过的HTML 5中的API | mysql命令行下的--tee选项功能

2012-11-04 10:13
浏览 6271
评论(2)
分类:Web前端
查看更多

2 楼 jackyrong 2012-11-04

呵呵，谢谢

1 楼 jinnianshilongnian 2012-11-04

标题jquery 漏掉y了

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

使用jquery 读取html 5 localstorage的值

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

使用jquery 读取html 5 localstorage的值

评论

发表评论

相关推荐

微信开发工具中时间问题的小坑

三篇不错的介绍CSS GRID的文章

双因素认证（2FA）教程

es6 中的export

markdown中的空格

(转）讲真，别再使用JWT了

(转）手把手教你WebStorm+chrome实现时时调试刷新

IntelliJ Idea 2017 免费激活方法

前端框架这么多，该何去何从？

记录一个HTML 5画拓扑图的商业公司

vue 2例子学习收集

（收藏）虚拟DOM内部是如何工作的

最近看到的几篇精彩JAVASCRIPT博客文章推荐

jsonp 跨域原理：深入浅出 jsonp

(转）深度长文-JavaScript数组所有API全解密

(收藏）网页导出PDF的方案

Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素

国内一个不错的大屏UI设计厂家

canvas仿芝麻信用分仪表盘

(转）CSS 变量教程

最近访客更多访客>>