本文摘自PHP中文网,作者php中世界最好的语言,侵删。
这次给大家带来用localStorage实现记住密码的功能,用localStorage实现记住密码的功能的注意事项有哪些,下面就是实战案例,一起来看一下。HTML5 提供了两种在客户端存储数据的新方法:
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset= "utf-8" >
<script src= "http://libs.baidu.com/jquery/1.9.1/jquery.min.js" ></script>
</head>
<style type= "text/css" >
form{
width: 300px;
padding: 10px 0px 20px 30px;
height:auto;
border-radius: 6px;
border-left:8px solid #19a049;
background:#eee;
margin:100px auto;
}
#user,#pass{
padding: 8px;
outline: none;
background: transparent;
border:1px solid #999;
margin-top: 5px;
}
#sub{
padding: 6px;
outline: none;
border:none;
background: #19a049;
color:#fff;
width: 150px;
border-radius: 6px;
cursor: pointer;
}
</style>
<body>
<form action= "" method= "" onsubmit= "return loginBtn_click();" >
<h3>Log in</h3>
<input type= "text" name= "user" placeholder= "user" id= "user" >
<input type= "password" name= "pass" placeholder= "password" id= "pass" >
<input type= "checkbox" id= "remember" checked><br/><br/>
<input type= "submit" id= "sub" >
</form>
</body>
<script type= "text/javascript" >
$(document).ready( function (){
var strName = localStorage.getItem( 'keyName' );
var strPass = localStorage.getItem( 'keyPass' );
if (strName){
$( '#user' ).val(strName);
} if (strPass){
$( '#pass' ).val(strPass);
}
});
function loginBtn_click(){
var strName = $( '#user' ).val();
var strPass = $( '#pass' ).val();
localStorage.setItem( 'keyName' ,strName);
if ($( '#remember' ).is( ':checked' )){
localStorage.setItem( 'keyPass' ,strPass);
} else {
localStorage.removeItem( 'keyPass' );
}
}
</script>
</html>
|
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
H5怎么操作WebSQL数据库
H5的Canvas做出圆形进度条并显示数字百分比
以上就是用localStorage实现记住密码的功能的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
nw.js的localStorage的物理储存实例详解
h5的定时器怎样实现进度条功能
localStorage和sessionstorage使用记录
html5的存储方式sessionstorage和localStorage详解
localStorage与sessionstorage该如何使用
html5文件异步上传功能的实现
怎样用h5添加禁止缩放功能
怎么用css设置记录用户密码
dreamweaver表单设置6位数密码实现方法
h5的页面中怎样调用app功能
更多相关阅读请进入《localStorage》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 用localStorage实现记住密码的功能