超简单的localStorage实现记住密码的功能

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

超简单的localStorage实现记住密码的功能

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta charset="utf-8">
 6     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
 7 </head>
 8 <style type="text/css">
 9     form{
10          300px;
11         padding: 10px 0px 20px 30px;
12         height:auto;
13         border-radius: 6px;
14         border-left:8px solid #19a049;
15         background:#eee;
16         margin:100px auto;
17     }
18     #user,#pass{
19         padding: 8px;
20         outline: none;
21         background: transparent;
22         border:1px solid #999;
23         margin-top: 5px;
24     }
25     #sub{
26         padding: 6px;
27         outline: none;
28         border:none;
29         background: #19a049;
30         color:#fff;
31          150px;
32         border-radius: 6px;
33         cursor: pointer;
34     }
35 </style>
36 <body>
37     <form action="" method="" onsubmit="return loginBtn_click();">
38         <h3>Log in</h3>
39         <input type="text" name="user" placeholder="user" >
40         <input type="password" name="pass" placeholder="password" >
41         <input type="checkbox"  checked><br/><br/>
42         <input type="submit" >
43     </form>
44 </body>
45 <script type="text/javascript">
46     $(document).ready(function(){
47 
48         var strName = localStorage.getItem('keyName');
49         var strPass = localStorage.getItem('keyPass');
50         if(strName){
51             $('#user').val(strName);
52         }if(strPass){
53             $('#pass').val(strPass);
54         }
55 
56     });
57 
58     function loginBtn_click(){
59             var strName = $('#user').val();
60             var strPass = $('#pass').val();
61             localStorage.setItem('keyName',strName);
62             if($('#remember').is(':checked')){
63                 localStorage.setItem('keyPass',strPass);
64             }else{
65                 localStorage.removeItem('keyPass');
66             }
67         }
68 </script>
69 </html>

超简单的localStorage实现记住密码的功能

相关推荐