您的位置：首页 > Web前端 > HTML5

利用h5的本地存储实现登录页面里的记住账号和密码功能

2017-02-23 13:42 1051 查看

h5的本地存储localstorage是永久存储，除非人为的移出或清空。

h5的sessionstorage在有效关闭页面时清空，刷新页面时不会清空。

另外：不同的浏览器，本地存储的内容是独立的，也就是说如果用chrome浏览器生成的本地存储在其他浏览器上是不能用的

localstorage的使用：

属性：

length //storage内键值对数量只读
setItem //添加键值对 key value
getItem //根据key获取键值对
key //键名可以根据index属性获取键名
removeItem //根据key移除键值对
clear //清空
存储类型及大小

webStorage之存储字符串（只要能被序列化为字符串都可以）
每个域名下5M

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='jquery.min.js'></script>
</head>
<body>
<form action="check.php" method="post" id='loadform'>
用户名
<input type="text" id="name"name="name">
<br>
<br>
密 码
<input type="password" id="password" name="pass">
<br>
<br>
    <input type="checkbox" id='jiyi'>记住账号
 
<button type="button" class="btn btn-default" id="submitBtn">登录</button>
</div>
</form>
</body>
<script>
var user = document.getElementById('name');
var	check= document.getElementById('jiyi');
var datas = localStorage.getItem('guoqi'); //json字符串
if(datas){
dataObj = JSON.parse(datas);
//JSON.parse()方法解析一个JSON字符串,构造由字符串描述的JavaScript值或对象
username=dataObj.username;
}else{
username="";
}
if(username !== ""){
get('guoqi',200000);//设置过期时间为200000毫秒
}
$('#submitBtn').click(function(){
fn();//设置本地存储
});
//fn()方法设置本地存储
function fn(){
if(check.checked){
set('guoqi',user.value);
}
}
//set()方法，设置本地存储的数据，数据中包括username(用户名)和time(时间节点)
function set(key,val){
var curTime = new Date().getTime();//获取当前时间
localStorage.setItem( key , JSON.stringify({username:val , time:curTime }));
//JSON.stringify()方法，把json对象转化成字符串
}
//get()方法，用来获取本地存储的数据并做过期判断
function get(key,val){
var data = localStorage.getItem(key);
var dataObj = JSON.parse(data);//JSON.parse()方法，把json字符串转化成json对象
//判断若过期，则清空本地存储
if(new Date().getTime()-dataObj.time>val){
localStorage.clear(); //清空本地存储
}else{
check.setAttribute("checked","");
user.value = username;
}
}
</script>
</html>

以上代码就是记住账号功能，那么记住密码也是一样的，我就不在这里重述了。

目前来看，h5的localstorage在各大浏览器的兼容性还不错，方便使用哦！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航