localstorage实现记住密码功能
localstorage是h5新增的一种数据存储的方法，它存储在客户端，用户不主动删除数据会一直保存下来，没有过期时间。而且，存储量较大。
与之对应的是sessionstorage，它在用户关闭当前页面的时候，数据就会自动删除，所以无法实现长期保存，而且数据存储量比较小。
以下代码来自转载，并非原创，可以直接复制查看效果。目的是慢慢积累一些知识，冰冻三尺，非一日之寒。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
用户名: <input type="text" id="user"><br>
密码: <input type="password" style="margin-left:15px" id="password"><br>
<input type="checkbox" style="margin-left:55px" id="check">是否记住密码<br>
<button id="btn" style="margin-left:75px">登录</button>
<script>
var user = document.getElementById('user');
var password = document.getElementById('password');
var check = document.getElementById('check');
var btn = document.getElementById('btn');
// 获取设置的本地存储的用户名的值
var loUser = localStorage.getItem('user');
// 获取设置的本地存储的密码的值
var loPass = localStorage.getItem('pass');
// 将本地存储的值设置给用户名和密码
user.value= loUser;
password.value = loPass;
// 判断本地存储值不为空的时候将勾选的checked设置为空
if(loUser!==''&&loPass!==''){
check.setAttribute('checked',true);
}
btn.onclick=function(){
if(check.checked){
console.log(check.checked);
// alert("选中");
// 勾选框勾选的时候设置本地的用户名和密码的val为输入的值
localStorage.setItem('user',user.value);
localStorage.setItem('pass',password.value);
}else{
// alert('未勾选');
// 勾选框未勾选的时候设置本地的用户名和密码为空
localStorage.setItem("user","");
localStorage.setItem("pass","");
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号