您现在的位置是：首页
>程序人生
>WEB前端
利用HTML5的localStorage实现记住密码
发布时间：2019-03-12 编辑：jielin 浏览：10635 评论：0
1、首先在这里普及一下localStorage
localStorage是HTML5提供的一种在客户端存储数据的新方法，之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。并且localStorage 方法存储的数据没有时间限制，第二天、第二周或下一年之后，数据依然可用。
2、那怎么使用呢？往下看这个小案例：
html代码：
账号:<input type="text" id="user">
密码:<input type="password" id="pwd">
记住密码:<input type="checkbox" id="remember">
<button id="btn">登录</button>
js代码：
// 先获取对应的dom节点
var user = document.getElementById('user');
var pass = document.getElementById('pwd');
var check = document.getElementById('remember');
var btn = document.getElementById('btn');
// 获取到user的值并保存
var localUser = localStorage.getItem('user') || '';
user.value = localUser;
//获取到pwd的值并保存
var localPass = localStorage.getItem('pass') || '';
pass.value = localPass;
// 如果localUser和localPass都不为空，说明数据已经存储到了本地，设置按钮为选中状态
if (localUser !== ' ' && localPass !== ' ') {
check.setAttribute('checked', ' ');
}
// 绑定点击按钮
btn.onclick = function() {
// 如果选中就存储信息，否则就清空信息
if (check.checked){
localStorage.setItem('user', user.value);
localStorage.setItem('pass', pass.value);
} else {
localStorage.setItem('user', ' ');
localStorage.setItem('pass', ' ');
}
}
3、以下是完整的HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>记住密码</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
账号:<input type="text" id="user">密码:<input type="password" id="pwd">记住密码:<input type="checkbox" id="remember">
<button id="btn">登录</button>
</body>
<script type="text/javascript">
var user = document.getElementById('user');
var pass = document.getElementById('pwd');
var check = document.getElementById('remember');
var btn = document.getElementById("btn");
var localUser = localStorage.getItem('user') || ''; //获取到user的值并保存
var localPass = localStorage.getItem('pass') || ''; //获取到pwd的值并保存
user.value = localUser;
pass.value = localPass;
if (localUser !== '' && localPass !== '') {
check.setAttribute('checked', '');
}
btn.onclick = function () {
if (check.checked) {
localStorage.setItem('user', user.value);
localStorage.setItem('pass', pass.value);
} else {
localStorage.setItem('user', '');
localStorage.setItem('pass', '');
}
}
</script>
</html>
是不是超级简单呢？
上一篇： 原生JS实现跨域问题-通过jsonp跨域