这篇文章给大家分享的是有关HTML5中如何使用localStorage实现记住密码功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。html5 提供了两种在客户端存储数据的新方法
这篇文章给大家分享的是有关HTML5中如何使用localStorage实现记住密码功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
html5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 javascript 来存储和访问数据。
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
<!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();">
<h4>Log in</h4>
<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>感谢各位的阅读！关于“html5中如何使用localStorage实现记住密码功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
--结束END--
本文标题: html5中如何使用localStorage实现记住密码功能
本文链接: https://www.lsjlt.com/news/71740.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0